• I’m having trouble figuring out how to center the header menubar without breaking the mobile version of that menubar. Any help would be appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hey there Evan,

    How are you doing today?

    That should be possible with some custom CSS. Since the theme has its own custom CSS tab which is located in Appearance -> Theme Options -> CSS Styles you can try adding the following code there:

    .main-nav {
      width: 740px;
      margin-left: auto;
      margin-right: auto;
    }

    Note that in order for this to work width must match the actual width of your navigation. If you’re unsure how to do that please post link to your site so I can take a look ??

    Also this shouldn’t affect the mobile menu since it is using different class.

    Please let me know if this helps ??

    Cheers,
    Bojan

    Thread Starter Evan

    (@phooey)

    Thanks for the reply! That sort of works, but left it off-set.

    I ended up going with this, at least for the time being:

    .main-nav {
    	margin: 0 auto;
    	width: -webkit-fit-content;
    	width: -moz-fit-content;
    	width: fit-content;
            width: intrinsic; /*safari*/
    }

    It seems to be doing the trick.

    I’d share the site, but it’s a client’s site, not mine, and it isn’t live yet.

    Hey there Evan,

    It’s probably off set because the width is not matching the actual width of the navigation so it is centering the whole element.

    If you managed to get it to work the there is no need for the site link anyway.

    Have a great day!

    Cheers,
    Bojan

    How can I center my header text?
    Evan’s solution is not working for me!

    Hey there Guuz,

    Hope you’re well today ??

    Generally you’d want to open a new thread, as you already posted here can you please post link to your site where and let me know what exactly are you trying to center in your header and I’ll try to help ??

    Cheers,
    Bojan

    The site is not alive yet, so I cannot post a link.
    But here is an image of it:
    header

    Hey Guuz,

    It’s really hard to provide proper CSS without actually inspecting your site. I’ve tried the following on my sandbox site using the theme from this thread and it worked with site title and description.

    You can try adding the following as described above:

    div#site-branding {
        text-align: center;
        width: 100%;
    }

    Hope this helps ??

    Best regards,
    Bojan

    Thanks, this worked!

    Awesome! Glad I could help ??

    Cheers,
    Bojan

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Centered Header Menu?’ is closed to new replies.