- This topic has 8 replies, 2 voices, and was last updated 5 years, 9 months ago by
.
-
Posts
-
We have a long tagline “Labrador Retriever Club of Greater Boston”. Unfortunately, on our site lrcgb.org if I show the tagline it pushes the navigation menu down to the next line which creates a weird look. Is there a CSS trick to make the tagline appear underneath the site logo/site title?
Hello @fuchsr,
When we inspected your site URL, we found that you have not added the tagline.
So can you please add the tagline and let us know so that we can help you with the precise fix?
Thank you.
Best Regards!!
Hi, I added the tagline to my development instance. Look at lrcgb-dev.org.
Here’s what I mean:
At full screen, everything looks great:
If I make the window small so the menu collapses to a hamburger menu, things look great:
The problem arises when I size the window to anything in between. Then the navigation menu stays full-size but slips to below the tagline blowing up the header:
Ideally, I’d like the title and tagline ALWAYS show under the logo, just like for small screen sizes.
I guess I could fake it by creating a site logo that includes the name and tagline but I was hoping there’s some CSS magic that can make that happen.
-r
Not sure why the images are not showing, here’s another stab at it. I’ve also added regular links to them.
Hello @fuchsr,
When we checked the site in responsive view we were unable to find such an issue as you can see in the screen record below:
https://www.useloom.com/share/0d355447c4f8467ca96394e935e5690d
Can you please provide the specific screen size so that we can help you?
Thank you.
Best Regards!!
I’m so sorry. You must have checked my site out right after I did a restore of the site and had not re-activated the display of the tag line 🙁 So when you were looking at it, only the logo and site title were showing and of course you won’t see anything wrong.
Please take another look now. The tagline is now showing again so you should be able to spot the issue I’m talking about: long tag line pushing the menu to another line.
Again, I apologize for causing confusion.
-r
Hello @fuchsr,
It is because the menu is in Uppercase.
So as a fix please add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
@media only screen and (min-width: 1024px) and (max-width: 1129px) { .site-logo img { max-height: 42px; margin-right: 9px; } .site-title { font-size: 22px; } .site-description{ font-size: 12px; } .main-navigation ul.nav-menu > li > a { padding: 36px 6px; font-size: 15px; } } @media only screen and (min-width: 1130px) and (max-width: 1330px) { .site-logo img { max-height: 49px; margin-right: 11px; } .site-title { font-size: 24px; } .site-description{ font-size: 14px; } .main-navigation ul.nav-menu > li > a { padding: 36px 8px; font-size: 15px; } }Hope this helps.
Best Regards!!
Works like a charm! I adjusted the @media display area width and font sizes a bit for the smaller tag line on our production site, and now it looks great at all screen sizes.
Thanks for your always superb support!!!
Hello @fuchsr
Glad that we could help you,
Kindly let us know if you have any further query/confusion.
Best Regards!!
- You must be logged in to reply to this topic.
