- This topic has 9 replies, 2 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
April 9, 2020 at 12:11 am #1232121Steve
Hello,
So I’m making a website based on GeneratePress’s Aspire theme, and I would like to make the top menu bar (the one that has Home, About, Services, Blog, Contact) black, both on desktop and mobile. How can I go about doing so?
Also, if I want to add a second menu bar directly below the top menu bar, how can I go about doing so? I have GeneratePress Premium and Elementor (but not Elementor Pro). Would I do this in Elementor or in GeneratePress?
Thanks!
April 9, 2020 at 5:34 am #1232400DavidStaffCustomer SupportHi there,
1. in Appearance > Elements – you will see two Header Elements:
https://docs.generatepress.com/article/header-element-overview/
If you edit them and go to the Site Header tab you can uncheck the Navigation colors and uncheck Merge with Content.
Now you can change the colors in Customizer > Colors > Primary Navigation.
2. In Appearance > Menus – create your second menu and set its Display Location to Secondary Menu.
In the Customizer > Layout > Secondary Navigation you can change its location.
April 9, 2020 at 11:32 pm #1233525SteveThanks David! I tried that and it works great. A few other questions:
1. How do you adding padding to the left side and the right side of the menu bar, so that there’s more space to the left side of the logo, and to the right of side of the rightmost menu item? I tried with the padding options on Home Page Header’s “Page Hero” tab but that didn’t work.
2. I set up WordPress on a subdirectory of my domain. How do I make it so that, when I click on the website logo, it goes to the homepage of my domain instead of to the subdirectory where WordPress is installed?
Thanks again!
April 10, 2020 at 7:22 am #1233858DavidStaffCustomer Support1. Try this CSS:
.main-navigation.has-branding .inside-navigation { padding-left: 20px; padding-right:20px; box-sizing: border-box; }
2. You can use this Filter to edit the Logo output:
https://docs.generatepress.com/article/generate_logo_output/
You would do something like this:
add_filter( 'generate_logo_href','tu_add_custom_logo_href' ); function tu_add_custom_logo_href( $url ) { $url = 'add_your_url_here'; return $url; }
April 10, 2020 at 12:13 pm #1234389SteveThanks David. For #1, I added your CSS to Appearance -> Customize -> Additional CSS and it didn’t work in adding padding to the left and right sides of the menu bar.
For #2, where would I add your code to?
Thanks!
April 10, 2020 at 2:03 pm #1234482DavidStaffCustomer SupportIn your CSS this Comment:
/*Additional CSS to add padding to menu bar*/)
remover the)
and then the code after it will work.That code is PHP – read here:
https://docs.generatepress.com/article/adding-php/April 10, 2020 at 4:00 pm #1234585SteveThanks David, this works great now! One last thing: I actually had to change the padding on the menu bar to pretty wide (130 pixels on both sides) to match the look of my main website. But by doing so, on the mobile site the menu bar is now broken into 2 lines. Is there a way to just add the padding to the desktop version of the menu bar and not the mobile version of the menu bar? Thanks!
April 11, 2020 at 5:01 am #1234980DavidStaffCustomer SupportInstead of using CSS – just set the Customizer > Layout > Primary Navigation –> Inner Navigation Width to contained to limit it to the width of your page content.
April 11, 2020 at 5:40 pm #1235764SteveAwesome, that works perfectly now. Thanks so much for all your help David!
April 12, 2020 at 9:10 am #1236345DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.