Jump to content

How to display both logo and text in site banner

Recommended Posts

Site URL: https://www.questiongamification.com

I've been looking into some custom CSS to display both my logo and the site title in the site header.

I got it to work on desktop using this code, but because it does not have enough space on the mobile header it ends up pushing my drop-down menu (two little bars) off screen. Could anyone help me figure out how to achieve the same thing without screwing up my site's mobile version?

CSS-snippet used:

.header-title-logo a:after {
    content: "Gamification of Education";
    display: inline-block;
    font-size: 20px;
    font-family: Poppins;
    color: black;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 555px;
}
.header-title-logo img {
    vertical-align: middle;
}

See pictures below for what I would like in desktop and mobile if possible (picture included from desktop as that works fine). The other pictures are of the mobile header and the way the text interferes with it.

result mobile.png

What I want.png

Mobile before.png

Link to comment
  • Replies 5
  • Views 864
  • Created
  • Last Reply
  • 4 months later...

I'm hoping for an answer to this — I'd like the logo on the right side and the site title on the left, if possible. Otherwise, I'd take the logo on the left and title on the right. None of the code I've found seems to make it happen. Many thanks for any help. 

Link to comment
23 hours ago, FoodLover said:

I'm hoping for an answer to this — I'd like the logo on the right side and the site title on the left, if possible. Otherwise, I'd take the logo on the left and title on the right. None of the code I've found seems to make it happen. Many thanks for any help. 

Can you share link to your site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.