Archived topic
Adding a 2nd top bar on mobile only
6 replies · Started by Cynthia on April 29, 2021
I was able to successfully add a Secondary menu in the header under my main menu. Everything looks goon laptop view. Secondary menu does not display on mobile view which is ok, but I would like to add the Secondary menu as a 2nd top bar under the one that is currently there ONLY ON MOBILE.
In other words I would like the 2 existing navigation items (Commercial Account & Fleet Services) on the Secondary menu to display as 2 links under the top bar on mobile view. I don't prefer a hamburger for the Secondary menu because I already have one there for the primary menu.
How would I do this?
Hi there,
You should be able to do this with a Block Element.
https://docs.generatepress.com/article/block-element-overview/
Create a Block element and add your 2 links in it.
You then hook the Block Element you've created on "generate_before_header", set the display rule location to "Entire site" and set the priority to "15".
Hi Elvin - this solution did not work. I created a block like you said but I have no idea how "to hook" that block like you mentioned, and by watching the video, the user interface is not set up like the version I have (the video UI is older I believe).....So even when I just go and create a hook directly and use before_header etc.....my code only gets placed above the header (not above the top bar like I want it) AND I only want my code to be above the top bar on mobile view (not on laptop view).
Please help
Hi Elvin, I decided to just create the hook for above header to make it easier. It's below the top bar which is fine, however, I would like to hide the hook on desktop and just allow it to keep displaying on mobile view.
This code doesn't seem to work:
.element{
display:none
}
site provided below
Thank you
Are you trying to hide this element on mobile?
If so just add the CSS class hide-on-mobile:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Leo.....per my last post, it's the reverse:
"I would like to hide the hook on desktop and just allow it to keep displaying on mobile view"
Sounds like the hide-on-desktop class is what you need.
It's all explained in the doc article I linked above.
