Jump to content

Need a tagline in the header that is automatically centered but doesn't show up on mobile site

Go to solution Solved by sorca_marian,

Recommended Posts

  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Website address?

Link to comment
  • Solution
Posted (edited)

Add the below code in Custom CSS, at the bottom, below all existing code

.header-title {
    flex-grow: 20;
}

.header-title-logo {
    display : flex;
    align-items : center;
}

.header-title-logo a {
    flex-basis : 227px;
    flex-shrink: 0;
}

.header-title-logo::after {
    width: 100%;
    padding : 0!important;
    text-align : center;
}

@media (max-width: 767px) {
    .header-title-logo::after {
        display: none;
    }
}

 

Screenshot 2024-03-10 at 03.15.27.png

Screenshot 2024-03-10 at 03.15.35.png

Edited by sorca_marian
Link to comment
4 minutes ago, sorca_marian said:

Add the below code in Custom CSS, at the bottom, below all existing code

.header-title {
    flex-grow: 20;
}

.header-title-logo {
    display : flex;
    align-items : center;
}

.header-title-logo a {
    flex-basis : 227px;
    flex-shrink: 0;
}

.header-title-logo::after {
    width: 100%;
    padding : 0!important;
    text-align : center;
}

@media (max-width: 767px) {
    .header-title-logo::after {
        display: none;
    }
}

 

Screenshot 2024-03-10 at 03.15.27.png

Screenshot 2024-03-10 at 03.15.35.png

THANK YOU!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.