[Resolved] Desktop & Mobile Identical menu – GeneratePress

[Kir29 LLC]

Hi,

We are struggling to achieve what we thought it would be possible with Generate Press.

As part of our web redesign initiative, we would like to replace our current header + sticky menu (www.buzziler.com) replicating this mobile header + sticky menu structure we like from https://theculturetrip.com/

image.png

Our brand identity color at Buzziler is yellow (HEX #F8EA23) we need to chance the white background to achieve something similar to this bus using our logo:

image.png

We would like to have the same ‘hamburger sticky menu’ (and no header since the logo is part of the menu) for both desktop and mobile,

We’ve tried multiple combinations (with/without header, playing with the primary menu settings, …. but unfortunately we are not able to achieve such a configuration.

Could you please advise what is the right configuration to achieve this?

Thank you for the help

Team Buzziler

[Leo]

Hi there,

Can you activate the mobile header option with a mobile header logo uploaded first?
https://docs.generatepress.com/article/mobile-header/

Then activate the navigation search as well:
https://docs.generatepress.com/article/navigation-search/

Then we should be able to provide the necessary CSS to achieve the layout.

Let me know 🙂

[Kir29 LLC]

Hi again,

Let’s forget about the search navigation for now since is not relevant).

We’ve changed mobile header options (check our staging area http://07y.2f5.myftpupload.com/) but we need help for:

1) Our logo is displayed very small and we need to at least double the size of it to be visible.
2) Our background color should be yellow (HEX #F8EA23) although the color scheme for the menu is correct (black/gray
3) Our new mobile header should also be used for desktops/tablets (instead of only mobile)

Could you please advise?

Thank you

[David]

Hi there,

1. Customizer > Layout > Primary Navigation – Increase the Menu Item Height. This will increase height of the mobile header and the logo.

2. Customizer > Colors > Primary Navigation – the mobile header uses these colors.

3. Customizer > Layout > Primary Navigation – Mobile Menu Breakpoint – manually type in a very large number eg. 4000. Now Mobile will be used across all device sizes.

[Kir29 LLC]

Hi again

Thanks for the reply. 1) & 3) look perfect now however for 2) we have a problem since our background color for the header should be yellow (HEX #F8EA23) but not for the menu color scheme (see http://07y.2f5.myftpupload.com/)

Out design team doesn’t allow us to have yellow also in the menu color schema. The correct menu schema selected is white.

Could you please advise how can we remove the yellow from the menu?

Thank you

[Tom]

Hi there,

Are you needing to change the color of the off canvas menu? If so, check out Customize > Colors > Off Canvas Panel.

Let me know 🙂

[Kir29 LLC]

Hi again.

That worked!

We are now considering to activate the navigation search as well following your instructions (https://docs.generatepress.com/article/navigation-search/) but we would need to change the location of the items.

Could you please advise how we can change the logo alignment to central, the menu alignment to the left and the search navigation aligned to the right?

Thank you for the support

[David]

We can help with the CSS layout – however probably best we pin down the design you’re trying to achieve.

e.g

3) Our new mobile header should also be used for desktops/tablets (instead of only mobile)

please advise do you still require the Mobile nav to be used across all devices ?

If so can you re-enable the mobile header.
Action the steps outlined here

And then enable the navigation search.

I can then provide the CSS to create that layout.

[Kir29 LLC]

Hi again,

With regards to your question ‘please advise do you still require the Mobile nav to be used across all devices?’ yes, we are happy with the current mobile design and we would like to have the same for for mobile/tablet/desktop.

A couple of questions:

1) Search Navigation has been enabled now for our staging site (http://07y.2f5.myftpupload.com/) but as you can see is not shorted in the way we required (menu on the left, logo in the center, search on the right).

2) e have also noticed the 3 items (menu / logo/ search) are displayed in multiple lines in a mobile device which would not follow the requirements from our UX team.

Could you please advise for 1) and 2)?

Thank you

[David]

Ok add this CSS to arrange the Menu / Logo / Search:

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

.main-navigation.has-branding .menu-toggle {
    order: -1 !important;
    margin-right: auto;
}

You can also use this CSS to adjust the width of the navigation search if required:

.navigation-search.nav-search-active {
    left: unset;
    max-width: 300px;
}

[Kir29 LLC]

Hi again,

Could you please specify where/how to specifically add both pieces of CSS?

Thanks

[David]

This article explains where to add CSS:

https://docs.generatepress.com/article/adding-css/

[Kir29 LLC]

Hi again

Using your Additional CSS option in your recommendation (https://docs.generatepress.com/article/adding-css/#additional-css) we’ve added the following code:

/* Buzziler Site CSS */ /* ===============================
CSS to for GeneratePress
=============================== */

/* Arrange Menu (left) / Logo (center) / Search (right) */
.site-logo.mobile-header-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.main-navigation.has-branding .menu-toggle {
order: -1;
margin-right: auto;
}

/* Adjust the width of the navigation search */
.navigation-search.nav-search-active {
left: unset;
max-width: 300px;
}

It looks good now (Staging site: http://07y.2f5.myftpupload.com/) but as soon as you scroll down in desktop/tablet/mobile the items lose their position.

Could you please advise?

Thank you

[David]

I made a slight change to this code

[Kir29 LLC]

Hi again,

Seems to work in most browsers but we’ve noticed a strange effect with the scroll bar in Chrome + iPhone (both when portrait and landscape mode).

Could you please check the scroll bar when scrolling down / up in Chrome + iPhone?

Thanks

[Author]

Posts