Center logo graphic & primary navigation

Shapely
1

Hi,

Does anyone know how to stack & center the main title/logo and primary navigation? Please see the attached images.

I was able to center the title/logo with instructions from a different post but it messed up the menu so I thought I’d ask about both in tandem.

2

Hi @erico,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (min-width: 991px){
#site-navigation .row > .module.left {
    float: none;
    width: 100%;
    text-align: center;
}
#site-navigation .module-group.right {
    float: none;
    display: table;
    margin: 0 auto;
    background: #fff;
}
}

Best Regards,
Movin

3

Hi Movin,

Thank you so much for the help!

That centers the title/logo and menu. There are 2 issues I’m running though. Once I make the update…

  • The links in the primary nav. aren’t clickable

  • The centered menu does not appear on interior pages.

Again, thank you so much, I’d be lost without this forum.
-Eric

4

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

5

Hi Movin,

I just made this live so it should work for you:
http://www.ericjoswald.com/staging/

For wide browser windows:

  • The primary navigation links aren’t clickable (at least until you scroll down the page)
  • The menu doesn’t display in inner pages.

Thanks so much!
-Eric

6

You can resolve the issue on your site using following CSS code.


.container.nav-bar {
    z-index: 99999;
}
7

Thank you so much for the help, that worked perfectly.

8

You are most welcome here :slight_smile: