Support/Puro Theme/responsive menu and site title wrapping

[Resolved] responsive menu and site title wrapping

  • Author
    Posts
  • July 25, 2018 at 5:58 pm #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.

    July 25, 2018 at 6:06 pm #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.

    July 25, 2018 at 6:49 pm #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.

    July 25, 2018 at 6:56 pm #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 🙂

    July 26, 2018 at 9:33 am #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;
}
    July 26, 2018 at 11:47 am #10173

    shreddie
    Participant

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

    July 26, 2018 at 1:50 pm #10174

    Andrew Misplon
    Keymaster

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

    Chat soon, cheers 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top