Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to display both logo and text in site banner


Aeduuin

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...