centering vertically the menu bar text

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 :cool:

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 ?

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 :cool:

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

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 ?

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. :cool:

include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>

<a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>

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

<div id="navEZPagesTopContainerBox">

<a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>

</div>

#navEZPagesTopContainerBox {
margin-right:20px;
}

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;
}