- This topic has 9 replies, 3 voices, and was last updated 5 years, 5 months ago by
bdbrown.
-
AuthorPosts
-
September 2, 2015 at 7:59 pm #133950
Zoe
Hi,
This is a newbie question, I’m setting up the menu for my site and I’m trying to make it look similar to this one:http://www.waterbenefitshealth.com
How can I set up sections within the menu like that site has?
Also, currently I have the menu on the left side of the home page, but it doesn’t show up on any other pages. What can I do to keep the menu on all pages?
Thanks!
ZoeSeptember 2, 2015 at 11:48 pm #133974Tom
Lead DeveloperLead DeveloperIt’s not really possible to split up the main navigation like that in GP.
You could add a “Custom Link” to your menu with no URL added for each heading, and give that item a specific CSS class which you can style different, but that’s the only way I can think you can do this using the main menu.
Otherwise, you can look into using the “Custom Menu” widget, and then you can style it however you like.
Let me know if you need more info π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 3, 2015 at 7:36 pm #134189Zoe
Thanks Tom.
I tried the Custom Menu, and it didn’t keep the slide out subheadings. This is my very rough site so far: http://knowadditives.com. You can see under Sweeteners in the menu, the high fructose corn syrup page slides out as normal, but the Custom Menu below just has it shown and indented. Is there a way to keep the slide out on a Custom Menu?
If not, I also put in a Custom Link called Additives Roundup at the top. I figured out how to give it a specific CSS class, but how can I change the formatting of the Custom Link?
Zoe
September 4, 2015 at 12:44 am #134211Tom
Lead DeveloperLead DeveloperYou’ll want to keep everything in your secondary menu there, just add your headers as you did the “Additives Roundup” one.
Then you can try adding some CSS like this:
.widget-area .secondary-navigation li.subhead a, .widget-area .secondary-navigation li.subhead a:visited, .widget-area .secondary-navigation li.subhead a:hover { background-color: #000000; color: #FFFFFF; }
With the above you can change background colors and text colors to your liking π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 6, 2015 at 4:11 pm #134857Zoe
I got your CSS working for my secondary menu, although I was thinking that it might be easier to just have everything in the primary menu now that the custom links are working as headings. I added that to my site if you want to have a look at what I mean.
Do you know what CSS would work to format the custom links in the primary menu instead?
Thanks again π
Zoe
September 6, 2015 at 11:57 pm #134914Tom
Lead DeveloperLead DeveloperThe primary menu in the sidebar would use this:
.widget-area .main-navigation li.subhead a, .widget-area .main-navigation li.subhead a:visited, .widget-area .main-navigation li.subhead a:hover { background-color: #000000; color: #FFFFFF; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 9, 2015 at 11:30 am #135615Zoe
Awesome, that works. A couple last questions…
Is there a line I can add to make those custom links bold text?
And how can I center all the primary menu items, including the custom links, instead of being left justified?
September 9, 2015 at 1:32 pm #135640bdbrown
Hi Zoe. See if this css answers your two last questions:
/* menu items bold */ .widget-area .main-navigation li.subhead a { font-weight: bold; } /* menu items centered */ .main-navigation ul { text-align: center; }
September 13, 2015 at 8:55 pm #136619Zoe
That worked perfectly π
Thanks so much!
September 13, 2015 at 10:16 pm #136624bdbrown
You’re welcome. Glad to help π
-
AuthorPosts
- You must be logged in to reply to this topic.