Jump to content

CSS code for including both logo and text in header not working properly

Go to solution Solved by Ziggy,

Recommended Posts

I want to have the logo in the website header along with the name of the company/website. Much like it says squarespace with the logo on the left, something like this:

[LOGO] "Website Name" 

Instead with my css code I get this

[LOGO]

"Website Name"

so the logo comes above the name, it used to work and without me making any changes that I can decern it has stopped working, I've included the CSS below.

 

.header-title-logo a:before{
    content: "Bil Export AS";
    display: inline-block !important;
    font-size: 40px !important;
    font-family: Halyard-Micro !important;
    color: #FBBE2C;
    text-align: center !important;
    vertical-align:middle !important;
    font-weight:900 !important;
    padding-left: 20px !important;
}
.header-title-logo img {
    vertical-align: middle;
}

.header-mobile-logo a:before {
    content: "Bil Export AS";
    display: inline-block;
    font-size: 20px;
    font-family: Halyard-Micro;
    color: #FBBE2C;
      width: 67%;
    margin: 0 auto;
    text-align: center;
    vertical-align: 15px;
    font-weight:900;
    padding-left: 20px;
      //padding-right: 20px;
}

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

How is it supposed to look? This is what I see, seems to have the text and logo:

image.png.9d5b51798dda09cd7935252d31772510.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, Ziggy said:

How is it supposed to look? This is what I see, seems to have the text and logo:

image.png.9d5b51798dda09cd7935252d31772510.png

well I'd rather the logo be on the left and not overlapping the bottom, I can position it either above or below using After/Before, but I cannot figure out how to position it on the same line as it used to be. 

again to illustrate the current look is

"TEXT"

[LOGO]

I want it to be

[LOGO] "Text"

 

Link to comment
  • Solution

Try this adjustment for the desktop:

.header-title-logo a:before{
    content: "Bil Export AS";
    display: inline-block !important;
    font-size: 40px !important;
    font-family: Halyard-Micro !important;
    color: #FBBE2C;
    text-align: center !important;
    vertical-align:middle !important;
    font-weight:900 !important;
    padding-left: 85px !important;
    padding-top: 6px;
    position: absolute;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo {
    position: relative;
    width: 25rem;
}

.header-mobile-logo a:before {
    content: "Bil Export AS";
    display: inline-block;
    font-size: 20px;
    font-family: Halyard-Micro;
    color: #FBBE2C;
      width: 67%;
    margin: 0 auto;
    text-align: center;
    vertical-align: 15px;
    font-weight:900;
    padding-left: 20px;
      //padding-right: 20px;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Oh no wait I'm just a bit slow, it worked in positioning the logo...because the text is no longer visible.

So interestingly it now works for the desktop version, but the mobile still has the issue. Alternatively I could simply forgo the text on the mobile version. 

Edited by Medicus
Link to comment

Try replacing the mobile portion with this:

.header .header-title--use-mobile-logo .header-mobile-logo {
    position: relative;
}
.header-mobile-logo a:after {
    content: "Bil Export AS";
    display: inline-block;
    font-size: 20px;
    font-family: Halyard-Micro;
    color: #FBBE2C;
    margin: 0 auto;
    text-align: center;
    vertical-align: 15px;
    font-weight:900;
    padding-left: 85px;
    margin-top: -70px;
    position: absolute;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.