- This topic has 7 replies, 2 voices, and was last updated 5 years, 10 months ago by Andrew Misplon.
Tagged: nav
- AuthorPosts
- January 7, 2019 at 2:50 am #11280
Darren UtteridgeParticipantGreetings,
I’m using SiteOrigin widgets in the Header of the Polestar Theme to display the Logo and a Button beside it with a Telephone number.
The navigation menu disappears when I active them.
I’ve tried adding to the CSS by displaying nav or #site-navigation as inline and margin-top: 500px just to see if that worked, but it doesn’t display at all.
Are you able to help? See example: https://www.teambuilder.net.au/duanesmobilecarcleaning/
Thanks in advance,
Darren UtteridgeJanuary 7, 2019 at 6:33 am #11281
Andrew MisplonKeymasterHi Darren
Thanks for reaching out and for your support. Sorry for the confusion
The header widget area replaces the contents of the header. When you have a moment, please could you try adding a menu via a Navigation Menu widget and then your custom content. The theme is looking out for the Navigation Menu in that area and will convert it into the mobile menu. If there are any issues, I’ll help adjust or we’ll come up with a different solution.
Thanks
January 7, 2019 at 11:31 am #11282
Darren UtteridgeParticipantHi Andrew,
Many thanks for your response and clarification on nav menu disappearing when using widgets in the header.
Just one other question, I’ve used the site navigation widget to display the menu, and CSS to style it but I’m having trouble getting the Mobile Menu to display and break at 798px?
Are you able to help?
Thanks in advance,
Darren UtteridgeJanuary 7, 2019 at 11:37 am #11283
Andrew MisplonKeymasterSuper, glad to hear you’re making progress. At
Customize > Theme Settings > Navigation
is the Mobile Menu enabled and the Mobile Menu Collapse set to 768?January 7, 2019 at 11:55 am #11284
Darren UtteridgeParticipantHi Andrew,
No sorry, that feature isn’t working. I’ve tried that setting and reset it again but it doesn’t work.
Thanks,
January 7, 2019 at 5:05 pm #11285
Andrew MisplonKeymasterSorry for the hassle. Thus far, I haven’t found a way of locating the Navigation Menu widget inside of a Layout Builder inside a given widget area. Polestar currently looks in the header widget area for a Navigation Menu widget and then adds a class and additional markup to it if it finds one. The widgetized menu then acts as the main menu would. Unfortunately, it isn’t currently able to locate the nav menu widget inside of a Layout Builder.
If you add the widgets directly to the widget area, I can help you build the layout. Here is what I have in testing:
Widgets:
Custom CSS added to
Customize > Additional CSS
:.site-header .widgets { flex-flow: row wrap; } .site-header .widgets .widget:first-of-type { width: 64%; } .site-header .widgets .widget:nth-of-type(2) { width: 10%; } .site-header .widgets .widget:nth-of-type(3) { margin-right: 0; width: 20%; } .site-header .widgets .widget:last-of-type { margin-top: 20px; text-align: center; width: 100%; } @media (max-width: 768px) { .site-header .widgets .widget { margin-right: 0; width: 100%; } .site-header .widgets .widget:nth-of-type(2) .social-media-button-container { text-align: center; } .site-header .widgets .widget:last-of-type { margin-top: 0; } #mobile-menu-button { right: 0 !important; } }
The widths, 64%, 10%, and 20% will most likely need to tweaked a bit for your content.
January 8, 2019 at 7:54 am #11286
Darren UtteridgeParticipantHey Andrew,
Thank you so much for putting that solution together for me. It works a treat!
Cheers,
DarrenJanuary 8, 2019 at 7:58 am #11287
Andrew MisplonKeymasterSuper 🙂 Really glad to hear that did the trick.
If any questions arise in the future, please let me know.
All the best.
- AuthorPosts
You must be logged in to reply to this topic.