[Resolved] responsive menu and site title wrapping

  • Author
    Posts
  • #10162

    shreddie
    Participant

    Hi Andrew,

    I just installed Puro Premium on one of my older sites, and it is a great improvement. I spent the last few hours doing this, working through issues and customizing. There are a couple issues I still cannot fix and hope you can help.

    1 – The Site Title and Tagline are wrapping when the size of the window shrinks. I would prefer they stay a single line each, and shrink point size if necessary.

    2 – When they do wrap, there is way too much space between lines (hopefully 1 can be fixed so 2 is not an issue)

    3 – I added the plugin Responsive Menu by Peter Featherstone for hamburger/responsive menu and customized it to my liking, but am seeing another hamburger menu ghosted below it. It is also functional and I don’t know where it is coming from, or how to get rid of it. Any ideas? Because the bg is so dark it is a little hard to see but it is below the orange hamburger menu.

    the site is https://bowmanrestorations.com

    thanks!
    Bruce

    #10164

    Andrew Misplon
    Keymaster

    Hi Bruce

    Good to hear from you πŸ™‚

    I’ll jump in tomorrow morning ASAP.

    3. Have you disabled the theme’s responsive menu? Theme Settings > Navigation > Mobile Menu.

    #10166

    Andrew Misplon
    Keymaster

    1 & 2. Please, try:

    @media (max-width: 768px) {
    	.site-header .site-branding {
    		float: none;
    		max-width: 100%;
    		padding-right: 0;
    	}
    	.site-header .site-branding h1 {
    		line-height: 45px;
    		padding-bottom: 10px
    	}
    }

    Adjust the h1 line height as required.

    #10169

    shreddie
    Participant

    Really getting close! I tweaked slightly:

    @media (max-width: 768px) {
    	.site-header .site-branding {
    		float: none;
    		max-width: 100%;
    		padding-right: 0;
    	}
    	.site-header .site-branding h1 {
    		line-height: 25px;
    		padding-bottom: 10px
    	}
    
    	.site-header .site-branding h2.site-description {
    		line-height: 15px;
    		padding-bottom: 10px
    	}
    }

    It still has some weird issues at the intermediate breakpoints and I’m not sure how to fix it myself.

    And, re: #3, Once I disabled the Mobile menu, the issue with having two hamburger menus went away, but now when the Responsive Menu plugin kicks in at 767, the horizontal text menu from Puro is not going away, and I have both. I would be ok with the horizontal menu at all but the smallest breakpoint as long as it flows smoothly without overlapping the .site-description and stays on one line without wrapping. Then I could set the Responsive Menu plugin to only show when it is in mobile portrait size.

    #10171

    Andrew Misplon
    Keymaster

    Thanks for the update. No problem, I’ll help iron out those intermediate points as soon as I’m back online in the morning. Chat then πŸ™‚

    #10172

    Andrew Misplon
    Keymaster

    Thanks for the wait. Perhaps try adding:

    @media (max-width: 768px) {
    	.main-navigation ul {
    		display: none;
    	}
    }
    
    .site-header .site-branding h1.site-title {
    	line-height: normal;
    }
    #10173

    shreddie
    Participant

    Thanks Andrew, that is pretty close to perfect, and good enough for me. Thanks again for your help.

    #10174

    Andrew Misplon
    Keymaster

    Super, glad that mostly helps. Let me know if any questions arise moving forward.

    Chat soon, cheers πŸ™‚

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

You must be logged in to reply to this topic.

Scroll to top