centering vertically the menu bar text

[tcjay]

I can not move the text in the menu bar navigation so it is centered vertically in the bar.

This is the styling:

#navEZPagesTop {
text-align:center;
font-size: 1.2em;
font-weight: bold;
margin: - 0 0 0em;
border-left:1px solid #663300;
border-right:1px solid #663300;
height:32px;
background-image: url(../images/navEZPagesTopbackground.jpg);

}


Can someone please advice:

http://www.stitchboutiqueboston.com

TIA Tom

[stevesh]

You need to put your padding-top in #navEZPagesTop instead of #navEZPagesTop a.

You realize that those links jump around as the visitor navigates since you placed the breadcrumbs inside #navEZPagesTop ?

[tcjay]

I have made the change as well as decreasing the height by the amount of the padding.

I realize that the links move around based on the width of the bread crumbs. I was not sure where the code should be placed. Where would you suggest I place it?

Tom

[stevesh]

I'd leave it where it is in a stock Zencart installation - in the maincontent area, below the headerwrapper. I'd guess you or someone moved it in includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

[tcjay]

You need to put your padding-top in #navEZPagesTop instead of #navEZPagesTop a.

You realize that those links jump around as the visitor navigates since you placed the breadcrumbs inside #navEZPagesTop ?

How do I prevent the EXpage navigation menu from jumping around when the breadcrumbs are long?

THis is the code from the ezpages_bar_header template.

include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>
<div id="navEZPagesTop">
<!-- bof breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->
<?php if (sizeof($var_linksList) >= 1) { ?>


<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) { ?>
<a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
<?php } ?>

[tcjay]

What I did was create a container box and class id called navEZPagesTopContainerBox and then set the right margin.

<div id="navEZPagesTopContainerBox">
<?php if (sizeof($var_linksList) >= 1) { ?>


<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) { ?>
<a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>

#navEZPagesTopContainerBox {
margin-right:20px;
}

[gjh42]

You didn't need any extra div to achieve the right spacing.

stylesheet.css (line 155)

#navEZPagesTop {
    background-image: url("../images/navEZPagesTopbackground.jpg");
    border-left: 1px solid #663300;
    border-right: 1px solid #663300;
    font-size: 1.2em;
    font-weight: bold;
    height: 25px;
    padding-top: 0.5em;
    text-align: right;
    width: 100%;
}

Change the items in red like this:

#navEZPagesTop {
    background-image: url("../images/navEZPagesTopbackground.jpg");
    border-left: 1px solid #663300;
    border-right: 1px solid #663300;
    font-size: 1.2em;
    font-weight: bold;
    height: 25px;
    padding: 0.5em 2em 0 0;
    text-align: right;
    width: auto;
}