• I’ve been using Press Customizr for some time now, but there’s one issue that’s been rather frustrating, which is that there seems to be no way to center the navigation bar vertically. I’ve tried all kinds of CSS, including solutions from the Customizr Navbar Guide 3.3.

    Strange thing is, no matter what CSS I add, the navbar simply won’t move. It sits stubbornly glued to the top of the screen, never any change no matter what I do. I was able to accomplish other changes to the navbar with CSS, centering, changing font size and color, changing color during hover, etc.

    But this one issue, I feel ready to give up on. Any help would be appreciated. Below is all the CSS that’s been added for the site, in case there’s something in there causing a conflict that I’m just missing.

    footer#footer {
    background: none repeat scroll 0 0 #6873CF;
    }

    .navbar .navbar-inner .site-description {
    width: 100%;
    text-align: center;
    }

    #wp-subscribe {
    background: none repeat scroll 0 0 #028482 !important;
    }
    #wp-subscribe input.email-field {
    background: none repeat scroll 0 0 #945 !important;
    }

    /* START OF Change the Navbar Colors/Font/Size */
    /* Adjust Menu (#6873CF) text color, (Garamond) font-family, (1.5em) font-size */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a {
    display: inline;
    color: #6873CF;
    font-family: Georgia;
    font-size: 1.5em;
    padding: 50px 25px;
    }

    /* Adjust Menu colors – Normal */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
    color: #6873CF;
    text-shadow: none;
    }
    /* Adjust Menu colors – Hover */
    .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
    color: #9F00FF;
    text-shadow: none;
    }
    /* Adjust Menu colors – Active */
    .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a,
    .navbar .nav > li.current-menu-item > a:first-letter,
    .navbar .nav > li.current-menu-ancestor > a:first-letter {
    color: blue;
    text-shadow: none;
    }

    /* Adjust dropdown Menu items (blue) text color, (yellow) shading and (green) border */
    .dropdown-menu > li > a {
    color: blue;
    background: yellow;
    border-bottom: 2px solid green;
    }

    /* Remove the Hover/Focus Colors */

    /* END OF Change the Navbar Colors/Font/Size */

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi Lucisweb,

    I suggest you try the following:

    .navbar .nav {
        position: relative;
        left: 50%;
        float: left;
        margin: 0 10px 0 0;
    }

    Hope it helps,
    Cheers,
    Darío

    Hi,

    You need to set the logo to center, so that the option for centering menu works.

    Please go to Appearance -> Customize -> Header -> Design and layout
    Find the setting -> Choose a layout for the header
    Select -> logo/title centered

    Next go to Appearance -> Customize -> Header -> Navigation Menus
    Find the setting -> Menu position (for the horizontal menu)
    Select -> Menu centered.

    Please see my screen-cast
    http://screencast-o-matic.com/watch/cb12fiX90J

    Thank you

    Thread Starter lucisweb

    (@lucisweb)

    Dario,
    I added the code that you suggested, and it kind of broke the website for a while. Trying to remove the code didn’t seem to fix it, then a few hours later, it seemed to go back to normal.

    Anyway, that code did strange things.

    • This reply was modified 7 years, 11 months ago by lucisweb.
    Thread Starter lucisweb

    (@lucisweb)

    Denzel,

    Thanks for your suggestion, but I will state again that I was looking to center the navbar VERTICALLY not horizontally. I already had it centered between left and right, now I need it to be centered between the top and bottom of the header. I knew of the centering option already, but as that is only for centering between the left and right (which is not what I needed), that’s why I was looking for some CSS to accomplish what the theme doesn’t have as a built in option.

    • This reply was modified 7 years, 11 months ago by lucisweb.
    • This reply was modified 7 years, 11 months ago by lucisweb.
    • This reply was modified 7 years, 11 months ago by lucisweb.

    Hi,

    You can use css position property to move anything vertically.
    https://css-tricks.com/almanac/properties/p/position/

    Try using relative position and adjust the top value.

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center Navbar Vertically’ is closed to new replies.