- This topic has 9 replies, 2 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
April 9, 2020 at 12:11 am #1232121
Steve
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 #1232400David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2020 at 11:32 pm #1233525Steve
Thanks 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 #1233858David
StaffCustomer 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2020 at 12:13 pm #1234389Steve
Thanks 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 #1234482David
StaffCustomer 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/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2020 at 4:00 pm #1234585Steve
Thanks 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 #1234980David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 11, 2020 at 5:40 pm #1235764Steve
Awesome, that works perfectly now. Thanks so much for all your help David!
April 12, 2020 at 9:10 am #1236345David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.