- This topic has 13 replies, 2 voices, and was last updated 5 years, 9 months ago by David.
-
AuthorPosts
-
June 14, 2018 at 3:45 am #599805Bas
Hi,
I have a sidebar widget with a extra navigation on subpages. If this page is watched on mobile I want the navigation transform in a responsive menu. Same style as the secondary navigation. I can’t seem to find a way to do this. Not on the web and not on this forum. Please help.
Thanks in advance.
Bas
June 14, 2018 at 6:45 am #599913DavidStaffCustomer SupportHi Bas,
the sidebar menu has the same content as the Secondary Navigation. Will you be keeping both of them?
June 14, 2018 at 6:51 am #599914BasHi David,
No I will create multiple menus. For each subject on the site a new one.
June 14, 2018 at 7:06 am #599926DavidStaffCustomer SupportOK, tricky one as GP only supports two navigations. Without coding our own drop down for the sidebar or using a plugin how about this:
Replace Secondary navigation with a Top Bar Widget Menu. We can add a little CSS to make it horizontal.
Now use the Secondary navigation for the Sidebar Menu. This will be automatically responsive.
Then for the Mobile, we hide the Top Bar (some CSS). And use the Slide Out Navigation that contains the primary and top bar menus.Any good?
June 14, 2018 at 7:17 am #599938BasSounds good! But how do I place the secondary navigation in a sidebar or more important in a widget? I use a pagebuilder and disabled the sidebars.
June 14, 2018 at 7:25 am #599951DavidStaffCustomer SupportOK, Customiser > Layout > Secondary Navigation > Location: Left Sidebar.
To hide Top Bar on Mobile this CSS:
@media (max-width: 768px) { .top-bar { display: none; } }
For the Slideout Navigation, set it to Mobile only and assign a menu that combines both the Primary and Top bar menu items.
June 14, 2018 at 7:27 am #599955BasSorry I changed my last comment. I use a pagebuilder and not using the sidebars. Is there an other way?
June 14, 2018 at 7:36 am #599964DavidStaffCustomer SupportRight, i am not familiar with Site Origin pagebuilder. Do they have a navigation widget?
June 14, 2018 at 7:37 am #599965BasI can use the basic navigation widget from WordPress within SiteOrigin.
June 14, 2018 at 9:28 am #600155DavidStaffCustomer SupportI have had a look around to see if there is a plugin or site origin add-on that could do this. Unfortunately, i haven’t been successful. This looks like it will require some custom coding. I am seeing if there is something simple that can do this function.
Question, when you add the site original menu widget can you give that widget an ID# ?
June 14, 2018 at 9:49 am #600180BasYes I can add ID and Class. I was also looking for a way to add some css to create a dropdown on mobile. The problem is that you need to add a select-function to unfold the dropdown.
June 15, 2018 at 4:01 am #600623DavidStaffCustomer SupportHi Bas, sorry for the delay, we can try a little bit of code if you’re up for it?
Lets see if we can get a simple toggle button in play, and then we’ll figure out the rest.First off a piece of Javascript to be added to the GP Hooks > wp_footer (make sure you save hooks):
<script> document.getElementById('mobile-toggle').onclick = function(){ document.getElementsByClassName('my-widget-class')[0].classList.toggle("open"); } </script>
The
my-widget-class
which you can name whatever needs to be added to the menu widget.Now above the menu widget we need a custom HTML widget with this to create our basic button:
<a id="mobile-toggle"> MENU</a>
And lastly this CSS:
#mobile-toggle:before { content: "\f0c9"; font-family: GeneratePress; } .my-widget-class:not(.open) { height: 0; overflow: hidden; } .my-widget-class.open{ height: auto; }
June 15, 2018 at 4:17 am #600635BasIt works! The rest is just styling.
Thanks for your great support!June 15, 2018 at 5:47 am #600683DavidStaffCustomer SupportGreat to hear that!
-
AuthorPosts
- You must be logged in to reply to this topic.