Bar hiding menu items + font size

Hi @ghoughton,
1) if the text resizing doesn’t work try using !important in your css:
font-size: 14px !important;

2)Your header has the following css:

header {
    padding: 25px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

Since your header uses absolute positioning, there is no css you can add to the simple banner class to put it on top. You will need to alter the header css to either change the top attribute or have it be position: relative.

• This reply was modified 5 years, 10 months ago by rpetersen29.
• This reply was modified 5 years, 10 months ago by rpetersen29.
• This reply was modified 5 years, 10 months ago by rpetersen29.
• This reply was modified 5 years, 10 months ago by rpetersen29.

Extremely helpful, thanks so much! I updated the font size and changed the position to relative.

The only two issues now are:

1) It cuts off the top part of our contact form pop-up
2) On mobile, it cuts off the top part of our hamburger/side bar when it opens

Would this be fixed if I leave position to absolute and change the top padding?

Thanks again for the help!

And just one more quick follow-up. Without changing anything, the top bar has completely disappeared. Do you have any insight as to why it would disappear?

You can handle the side menu with

.mnu {
    padding-top: 70px;
}

Add !important if that doesn’t get applied.

I’m not sure what you mean about the top part of the contact pop-up, did you change that?

Finally, on the main page the banner has disappeared. Please check if you selected the home page on the Disabled Pages option. If that’s not the case, some plugins can mess with the plugin, particularly ones that try to “optimize” you’re css and javascript on your website. If that is the case, that is something you probably don’t need. The top 6 biggest things that load on your page are images, so the biggest performance improvement would be reducing those sizes. Otherwise, please check any plugins you installed after simple banner.

• This reply was modified 5 years, 10 months ago by rpetersen29.

Thanks for this snippet! All good on the side bar now. Also, the bar is now appearing everywhere. It was a cache issue.

Lastly, regarding the pop-up, when you click our “Schedule Demo” button on mobile, the first input and “x” button on the top right of the pop-up are covered by the Simple Banner. Curious if there’s a custom CSS that can fix that as well?

Yes, this you can actually fix with the simple banner custom css. Just put z-index: 1000; there. the z-index of the modal is 1050 so it just has to be less than that for the modal to show up on top.

Amazing – thanks for all the assistance here. Really appreciate your time in making this perfect for our site.

Final question, I removed the below snippet because it was moving down our desktop menu items as well, not just the mobile hamburger menu.

.mnu {
padding-top: 70px;
}

Is there a way to add padding to just the mobile menu and not the desktop menu?

Thanks!

try

@media only screen and (max-width: 767px)
header .mnu {
    padding-top: 70px;
}

thanks for the additional snippet! I added that and tried it with the important tag and neither seem to shift the hamburger menu down.

Try this instead, i think this might work

.burger-menu.close + .mnu {
    padding-top: 70px !important;
}

thanks for this additional snippet. unfortunately, it’s not seeming to take either.

That one should work, can you send me exactly what you have in your custom css section?

see below:

header {
padding: 25px 0;
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

@media only screen and (max-width: 767px)
burger-menu.close + .mnu {
padding-top: 70px !important;
}

change to

header {
padding: 25px 0;
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.burger-menu.close + .mnu {
    padding-top: 70px !important;
}

absolutely perfect! thank you for all your time and work in making this perfect for our site. Excited now to keep using this for our messaging!