• Resolved jamiedanno

    (@jamiedanno)


    Can anyone advise on how to center the menu bar and the menu tabs?

    In other words, I want to center my menu with the logo on the left and center the menu categories within the menu bar. Click here to see what I mean: https://www.accuratepayroll.com/wp/

    Any insight here is helpful, thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi,
    try this code:

    .navbar-inner{
        padding-right: 5px;
    }
    .tc-header .nav-collapse{
        float: none;
    }
    .navbar .nav {
        width: 100%;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .nav-collapse .nav > li{
        float: none;
        display: inline-block;
    }
    .nav-collapse .nav > li li{
        text-align: left;
    }
    @media (max-width: 979px){
        .nav-collapse .nav > li{
            display: list-item;
        }
    }

    did this help?

    Thread Starter jamiedanno

    (@jamiedanno)

    Hi there! Thanks for this… can you tell me where to place this code?

    In Appearance -> Customize -> Advanced options -> Custom Css
    Or in your child-theme style.css
    If you plan to make massive css changes or custom functions (php) I suggest to build up a child-theme

    Hope this helps ??

    Thread Starter jamiedanno

    (@jamiedanno)

    Thanks so much! That definitely centered my menu bar categories (within the menu bar). Any suggestions on how to move the menu bar down from the top of the page?

    could be pretty tricky when resizing the window..
    The whole box?
    and where at the bottom (header bottom)? If yes, try something of the sort..

    .navbar-wrapper {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    @media (max-width: 979px){
        .navbar-wrapper {position: initial;}
    }

    Thread Starter jamiedanno

    (@jamiedanno)

    Sorry, I think I’m communicating this wrong. I want to keep the menu bar at the top of the page, just not up against the very top. In other words, I want to bring it down just a little so it is parallel with my logo on the left. Make sense? I want to center it in that white space, so there is equal space above the menu bar and below the menu bar.

    here is the website to reference: https://www.accuratepayroll.com/wp/

    Yeah I got you wanted it stay in the header ?? Just didn’t get where if not top, and supposed the bottom, try ..
    Something like…

    .navbar-wrapper {
        position: absolute;
        right: 0;
        top: 30%;
    }
    
    @media (max-width: 979px){
        .navbar-wrapper {position: initial;}
    }

    same code as before, but not at the bottom of the header, +/- at its middle. Adjust that 30% to suit your needs

    Thread Starter jamiedanno

    (@jamiedanno)

    Perfect! Thanks so much!

    Glad you solved.
    Would you mind marking this topic as resolved?
    Thank you ??

    Thread Starter jamiedanno

    (@jamiedanno)

    sure thing!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘center menu?’ is closed to new replies.