- This topic has 36 replies, 4 voices, and was last updated 3 years, 6 months ago by
David.
-
AuthorPosts
-
March 16, 2020 at 11:11 am #1196645
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
March 16, 2020 at 12:19 pm #1196698Leo
StaffCustomer SupportHi 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 π
March 17, 2020 at 3:48 am #1197125Kir29 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
March 17, 2020 at 7:16 am #1197439David
StaffCustomer SupportHi 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.
March 17, 2020 at 10:02 am #1197612Kir29 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
March 17, 2020 at 3:55 pm #1197808Tom
Lead DeveloperLead DeveloperHi 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 π
March 18, 2020 at 3:07 am #1198142Kir29 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
March 18, 2020 at 5:13 am #1198252David
StaffCustomer SupportWe 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 hereAnd then enable the navigation search.
I can then provide the CSS to create that layout.
March 20, 2020 at 5:17 am #1200417Kir29 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
March 20, 2020 at 5:38 am #1200436David
StaffCustomer SupportOk 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; }
March 20, 2020 at 8:16 am #1200766Kir29 LLC
Hi again,
Could you please specify where/how to specifically add both pieces of CSS?
Thanks
March 20, 2020 at 8:19 am #1200767David
StaffCustomer SupportThis article explains where to add CSS:
March 20, 2020 at 8:50 am #1200787Kir29 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
March 20, 2020 at 8:52 am #1200791David
StaffCustomer SupportI made a slight change to this code
March 20, 2020 at 9:17 am #1200817Kir29 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
-
AuthorPosts
- You must be logged in to reply to this topic.