Home Forums Pro Themes Pet Business Pro Placement of tagline

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #92466
    fuchsr
    Participant

    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?

    #92515
    wensolutions
    Keymaster

    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!!

    #92541
    fuchsr
    Participant

    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:
    Full Screen

    If I make the window small so the menu collapses to a hamburger menu, things look great:
    Small

    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:
    medium

    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

    #92543
    fuchsr
    Participant

    Not sure why the images are not showing, here’s another stab at it. I’ve also added regular links to them.

    Full window

    Small window

    Medium window

    #92570
    wensolutions
    Keymaster

    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!!

    #92571
    fuchsr
    Participant

    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

    #92693
    wensolutions
    Keymaster

    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!!

    #92699
    fuchsr
    Participant

    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!!!

    #92825
    wensolutions
    Keymaster

    Hello @fuchsr

    Glad that we could help you,

    Kindly let us know if you have any further query/confusion.

    Best Regards!!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.