[Resolved] Menu Layout on Desktop and Mobile

[Danny]

Hello,

I am looking to modify my menus on both desktop and mobile like the images below. Please give me some advice on the best way to proceed to accomplish this. Also, on mobile, when pressing on mobile hamburger icon, I would like to center the menu items, make the background color match my background and make the text white. Thank you in advance for your help.

Desktop Example
Mobile Example

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

this CSS should achieve that for Mobile:

.mobile-header-content {
    margin-right: 1em;
}
#mobile-header .menu-toggle {
    order: -1 !important;
}
#mobile-header .site-logo {
    margin-left: auto;
}

To use the hamburger menu on desktop you will need to use the Slideout navigation:

https://docs.generatepress.com/article/activating-slide-out-navigation/

If you choose to use slideout for Mobile as well then you can remove the menu items you don’t need from the Primary Nav, otherwise we can use some CSS to hide them on desktop.

If you can set this up then i will take a look at the CSS you require to make the design on desktop too.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Danny]

Hello,

I applied the changes as requested on both mobile and desktop. I created a new menu and used it for both desktop and mobile. I removed the php for the mobile menu button.

Mobile: 1) I would like the menu to be full screen 2) center the logo, 3) add slight transparency to the menu, 4) please help me clean up un-needed code like styling to previous buttons

Desktop: 1) Make Hamburger logo bigger, 2) center logo, 3) move hamburger menu to left, 4) add slight transparency to the menu, 5) please help me clean up the un-needed code like styling to previous buttons, 6) make the menu bigger, 7) apply the menu underline styling in secondary menu on learn page

[Tom]

Hi there,

Mobile: It’s not possible to make it full screen right now, but this option does exist in GPP 1.8.0, which is available for public testing: https://generatepress.com/gp-premium-1-8/

To center the logo, try this:

#mobile-header .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

To add a slight background, do this:

.header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
    background: rgba(255,255,255,0.1);
}

Desktop:

Make the hamburger bigger with this:

.main-navigation .slideout-toggle a {
    font-size: 30px;
}

Center the logo:

.main-navigation .site-logo.navigation-logo {
    left: 50%;
    transform: translateX(-50%);
}

Move hamburger to the left:

.main-navigation .slideout-toggle {
    position: absolute;
    left: 0;
}

Add transparency to menu: There’s an option for the navigation background color inside your Header Element: https://docs.generatepress.com/article/header-element-overview/#site-header

I’m not too sure what you mean by the other requests – can you explain a bit more?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

Hi Tom,

Thank you for your response and help.

On click of GET TODAY’S RATES Mobile Menu Link, how do I remove the button styling that appears briefly?

[Danny]

On Desktop, how do I move the phone number and Get Today’s Rates from the slide-out menu and show in the upper right of the website?

[Danny]

On both desktop and mobile, I would like to increase font-size on both desktop and mobile to be about 40px on the desktop and 20 px on mobile.

On the desktop, I would like to apply this styling to the slide-out menu links on hover:
/* secondary nav links effect */

@media (min-width: 769px) {
.secondary-navigation .secondary-menu > .menu-item> a::after {
content: “”;
position: relative;
right: 0;
left: 50%;
bottom: 20px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
.secondary-navigation .secondary-menu > .menu-item.current-menu-ancestor > a::after,
.secondary-navigation .secondary-menu > .menu-item > a:hover::after {
width: 50%;
}
}

[Tom]

1. I’m not seeing any brief button styling. Did you fix this?

2. You can remove those menu items from off canvas menu, and add them to your primary menu. Then give them the menu-item-float-right classes.

3. Are the font size options in the Customizer not working for you. Which elements are you trying to target?

4. In that CSS, replace:

.secondary-navigation .secondary-menu

With:

.slideout-navigation .slideout-menu

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

RE: 1. I’m not seeing any brief button styling. Did you fix this?

This happens on click on mobile. Open hamburger menu > click on Get Today’s Rates

[Danny]

Hi Tom,

Thanks again for your continued support.

Regarding:

2. You can remove those menu items from the off-canvas menu, and add them to your primary menu. Then give them the menu-item-float-right classes: I did this, how do I style the Get Rates link as an outline button in white with white text and change color on hover to green and white text?

3. Are the font size options in the Customizer not working for you. Which elements are you trying to target? This one is resolved.

4. In that CSS, replace: .secondary-navigation .secondary-menu With:.slideout-navigation .slideout-menu >> I did, but the effect is not working. Today, 4/11, I installed GP 1.8 to use the off-canvas panel. Just want to give you a heads up if that changes the elements that need styling.

[Tom]

1. Still can’t see this. I see the button was created in Elementor – maybe the effect is in their settings somewhere?

2. This might help: https://docs.generatepress.com/article/adding-buttons-navigation/

4. Where did you add the CSS? Can you deactivate your caching plugin so I can view the source easier?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

RE: 4

I deactivated the cache plugins and put Cloudflare into development mode. All my CSS is placed in appearance > theme editor.

[Danny]

RE: 2. This might help: https://docs.generatepress.com/article/adding-buttons-navigation/

I added the button, thank you for the tip. How do I align the button to the right of the phone number? I tried re-arranging the menu item in the menu.

[Tom]

4. It seems the content value is messed up: content: “”;

Can you make sure it’s just ""?

2. Try removing the menu-item-float-right class from the menu item.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

Both of those fixes worked. Thank you and good job.

RE #4: Is there a way to not underline the Get Today’s Rates link. This text is styled like a button.

[Author]

Posts