[Resolved] Menu / Header Questions

[Tim]

1. On the mobile menu the logo is bigger then the hamburger so it goes over the top and doesn’t lay out very nice. IS there a way to only decrease the size of mobile logo just a little bit?

2. I’d like to have the “Request Appointment” button not in the slide out but directly under the logo and remain in the sticky menu so that it’s always visible.

3. On mobile I’d like to add a second button by the “request appointment” that is our phone number so it’s always visible and easily clickable.

Can you help?!

[Ying]

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.

[Tim]

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?

[Tim]

Showing up double only on mobile.

[Fernando]

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

[Tim]

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?

[David]

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.

[Tim]

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?

[David]

Try this CSS to correct that:

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

[Tim]

Awesome! Thank you!!

[David]

You’re welcome

[Author]

Posts