Support/Puro Theme/responsive menu and site title wrapping

[Resolved] responsive menu and site title wrapping

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

    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.

    • This reply was modified 5 years, 2 months ago by shreddie. Reason: typo
    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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top