[Resolved] responsive menu and site title wrapping

  • Author
    Posts
  • #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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top