[Resolved] Using Header widgets and the Nav bar disappears

Tagged: 

  • Author
    Posts
  • #11280

    Darren Utteridge
    Participant

    Greetings,

    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 Utteridge

    #11281

    Andrew Misplon
    Keymaster

    Hi 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

    #11282

    Darren Utteridge
    Participant

    Hi 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 Utteridge

    #11283

    Andrew Misplon
    Keymaster

    Super, 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?

    #11284

    Darren Utteridge
    Participant

    Hi Andrew,

    No sorry, that feature isn’t working. I’ve tried that setting and reset it again but it doesn’t work.

    Thanks,

    #11285

    Andrew Misplon
    Keymaster

    Sorry 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:

    View post on imgur.com

    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.

    #11286

    Darren Utteridge
    Participant

    Hey Andrew,

    Thank you so much for putting that solution together for me. It works a treat!

    Cheers,
    Darren

    #11287

    Andrew Misplon
    Keymaster

    Super 🙂 Really glad to hear that did the trick.

    If any questions arise in the future, please let me know.

    All the best.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top