Menu / Header Questions

Hi Tim,

1. Try this CSS, feel free to adjust the value.

@media (max-width: 768px) {
.site-header .site-logo{
    width: 80%;
}
}

2.
1) Add this CSS:

.menu-bar-items {
    display: block !important;
}

2) Remove the hide-on-mobile class from the buttons block which represent the “Request Appointment”.

3. You can add another button block with phone number to the same buttons block which represent the “Request Appointment”, add hide-on-desktop class to the button block of phone number if you don't want it to appear on desktop.

Ok. I did that but now that button is showing up double? Thoughts?

Would there be a way to have it so we have the logo...then hamburger menu... Then underneath that we have the buttons...a bit smaller and side by side?

Showing up double only on mobile.

Hi Tim,

I see.

Can you remove this code first?:

.menu-bar-items {
    display: block !important;
}

Then, can you provide admin login credentials for your staging site, and we'll take a closer look at your structure?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Ah perfect. That worked.

Now what would be the best way to go about getting another button for call and then have those lay out horizontally (a little bit smaller) and the same size?

Hi there,

edit the Element for your menu bar items, select the Buttons block - thats the outer wrapper block not the single button inside it, and then + new button from its Toolbar.

Theres limited space, so you may need to adjust the buttons styles.

Well that was obvious lol! Thank you.

Looks great now on mobile but when I scroll to the sticky menu the hamburger menu justifies to the left. Is there a way to center that on Mobile Sticky?

Try this CSS to correct that:

#sticky-navigation .menu-toggle {
    flex-grow: 1;
    width: auto;
    padding: 0;
    line-height: 50px;
}

Awesome! Thank you!!

You're welcome