Center Mobile Nav Bar Button

Support
#1

Hello,

I’m trying to center the mobile nav bar button in the Integrity stack. I’d like it to look like the attached screenshot. When I was able to get it to look like this, the hamburger menu also showed up in the desktop version somehow. It looked sloppy.

Thank you for your help!

#2

Hi there,

Thanks for writing in.

This could be done through custom CSS.

You can use the .x-navbar-inner and set the text alignment to center and then add a CSS rule to .x-btn-navbar to set the floating to none and make have it displayed as inline-block so that the mobile button will not display fullwidth.

Hope this helps.

#3

Unfortunately, I’m a little lost here. I’m new at this!

#4

Hello There,

Thanks for writing in! To resolve your issue, please remove this css block first:

@media screen and (max-width: 979px) {
  .masthead-inline .x-btn-navbar {
    float: left !important;
  }
}

You will need to replace it with this code instead:

@media(max-width: 767px){
    .x-navbar {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none !important;
        display: inline-block;
    }
}

We would loved to know if this has work for you. Thank you.

#5

Hi,

Thank you! That centered the menu. However, it did not make it a long bar as in the photo I posted. Can you please help with that?

Thanks!

#6

Hi there,

Please update the code to:

@media(max-width: 767px){
    .x-navbar {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none !important;
        display: inline-block;
        width: 100%;
    }
}

Hope this helps.

#7

Wonderful! Thank you. How do I left align the text in the menu under this bar?

Thanks.

#8

Hello,

Looking at the remaining pages, the bar looks strange as it sits under the logo at the bottom of the header space. Is there to make make the regular hamburger menu left aligned on the pages within the site and keep the long bar just for the home page?

#9

Hi there,

Yes it is possible just change the code to this:

@media(max-width: 767px){
    .home .x-navbar {
        text-align: center;
    }

    .home .x-nav-wrap.mobile li {
        text-align: left;
    }

    .home .masthead-inline .x-btn-navbar {
        float: none !important;
        display: inline-block;
        width: 100%;
    }
}

What I have done is to go to the front end of your website and use the Chrome Browser developer toolbar to check the body tag of the HTML, there I see different helper classes that can be used to make sure the code will be restricted to this page. I found the home class suitable for this, and as you see in the suggested code, I wrapped all rules to the .home class.

I suggest that you watch this video to get familiar with the concept:

I used the same tool to determine the selector of the mobile menu items which is .home .x-nav-wrap.mobile li and added the text-align: left to make it right aligned.

Hope it helps.

#10

Thank you for the info and for the video. It’s almost there, I just need the hamburger menu on the non-homepage pages to be on the left. I appreciate your help!

#11

Hi There,

See this: https://screencast-o-matic.com/watch/cbj61AlGqB
This is the CSS:

   float: left;
}```

The homepage body always has home class. So we used the not selector to target  non-homepage menu button.

Hope this helps.
#12

This worked! Thank you. I like how support has been explaining a bit of the concept behind the snippets. I got in way over my head with this theme and it’s very helpful.

Thanks!

#13

Glad we could help.

Cheers!