Docs

[DCIJeff]

Hello,
I have added some custom html and css to the topbar of my site to add a logo and some other graphics.
I’m running in to a problem when the site is viewed on smaller screens.
As the items in the topbar responsively shift down they must layer on top of the hamburger menu button and it becomes non-clickable.
I searched through the forums and found some code here (https://community.theme.co/forums/topic/topbar-content-customization/) to try and hide the items as the width decreases, but I can’t seem to get it to work.
I also tried to adjust the z-index property to make sure the hamburger menu button (x-btn-navbar.collapsed) is the top-most element in the layer order, but that didn’t work either.
So I’m asking for help to get the hamburger menu button to be clickable on smaller screens.
I will post site and login info in the next post so you folks can see what I’m talking about.

Thanks in advance for any help you can provide!
Jeff

[DCIJeff]

This reply has been marked as private.

[Paul R]

Hi Jeff,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.masthead-stacked .x-navbar {
    clear: both;
}

.x-topbar {
    height: 207px;
}

.x-btn-navbar {
display: block;
    float: left !important;
}
}

Hope that helps

[DCIJeff]

That’s perfect, you folks are amazing!

One more thing if I can ask?
Can you help with getting the items in the topbar centered on the page?
Right now they are flush left, and continue to stay flush left when they move down. I would like them horizontally centered on the page.

Thanks again for all the help you offer,
Jeff

[Paul R]

Hi Jeff,

Please add this code as well.

@media (max-width: 979px) {
.x-topbar {
    height: auto !important;
}

.x-topbar  div {
    float:none;
    display:inline-block;
    vertical-align:middle
}

.x-topbar {
    text-align:center;
}

.x-topbar p:empty{
margin:0;
}

.x-navbar-wrap {
    margin-top:0;
}
}

Hope that helps.

[DCIJeff]

Fantastic!
You Guys Rock!
Thank you very much for your help!!!
Jeff

[Paul R]

You’re welcome! 🙂

[Author]

Posts