Site Title & Logo Together in Header

Site URL: https://www.footandanklesurgery.com.au/

Hello,

I want to put a logo next to the site's title in the header. If I upload a logo file, the title will not display.

Would like to add the logo to the left side of the text. Also hide the title text when in mobile mode.

Been trying to search the answers on these forums but haven't had much luck.

Is this possible with 7.0? 

Thank you in advanced.

You can add a logo first, then we can give the code to insert title on right of logo

ok i have added the logo back in. many thanks for the help

1 hour ago, SquareFish said:

ok i have added the logo back in. many thanks for the help

Add to Home > Design > Custom CSS

a.Header-branding:after {
    content: "Squarespace";
    color: white;
    margin-left: 10px;
}
a.Header-branding {
    display: flex;
    align-items: center;
}

many thanks again!

Tuanphan -

I tried this but it didn't work for me. 

I edited the site header so it now has a site title and a logo uploaded.

Then I pasted in the CSS (Home > Design > Custom CSS). 

Result:  only the logo is displayed.  The site title will not display unless I delete the logo.

Do you have a suggestion?  Thank you.

5 hours ago, Rogue_Petunia said:

Tuanphan -

I tried this but it didn't work for me. 

I edited the site header so it now has a site title and a logo uploaded.

Then I pasted in the CSS (Home > Design > Custom CSS). 

Result:  only the logo is displayed.  The site title will not display unless I delete the logo.

Do you have a suggestion?  Thank you.

 

Can you share site url? We can check easier

Try using a tagline with your logo instead of a title, looks the same. 

Hi the video @derricksrandomviews @tuanphan above is super useful, do you guys know if it's possible to put a logo to the left of nav bar and a name title /site title to the right of nav bar using custom css too?

13 hours ago, AC101 said:

Hi the video @derricksrandomviews @tuanphan above is super useful, do you guys know if it's possible to put a logo to the left of nav bar and a name title /site title to the right of nav bar using custom css too?

 

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

Hello! I have got the same issue.

www.ingeniousenglish.ro 
I'd like to have the site title on the right of the logo. Could you help please?

16 hours ago, DanAdrianDan said:

Hello! I have got the same issue.

 

www.ingeniousenglish.ro 
I'd like to have the site title on the right of the logo. Could you help please?

Add to Design > Custom CSS

/* Add site title */
.header-title-logo a:after {
    content: "Squarespace";
    display: block;
    color: #1bb7c5;
    font-size: 24px;
}
.header-title-logo a {
    display: flex;
    align-items: center;
}

Thank you! That worked!

@tuanphan hey, I used the code to align my header left, what code could i use to move the social icon to the right with the cart, please? Also, the cart has some issue where I used CSS and it has a separate 'bubble' around the cart, and the cart quantity, instead of one around both (and their hover command words independently too)

Not sure which is my code as i have loads, but i think it's somewhere here:

.header-actions-action--cart .icon {stroke: #fccfe8!important; background-color:  #ff69b4; border-radius: 100px; padding-left: 1.5px!important; padding-right: 1.5px; padding-top: 1px; padding-bottom: 1px}

.header-actions-action--cart .icon:hover {background-color: #fccfe8!important; stroke: black!important} 

.header-actions-action--cart .icon-cart-quantity:hover {color: black!important}

.header-actions-action--cart .icon-cart-quantity {color: #fbb7dd!important;}

website is: www.pretty-positive.co.uk
 

On 10/20/2022 at 10:03 PM, prettypositivejksnmedia said:

@tuanphan hey, I used the code to align my header left, what code could i use to move the social icon to the right with the cart, please? Also, the cart has some issue where I used CSS and it has a separate 'bubble' around the cart, and the cart quantity, instead of one around both (and their hover command words independently too)

Not sure which is my code as i have loads, but i think it's somewhere here:

.header-actions-action--cart .icon {stroke: #fccfe8!important; background-color:  #ff69b4; border-radius: 100px; padding-left: 1.5px!important; padding-right: 1.5px; padding-top: 1px; padding-bottom: 1px}

.header-actions-action--cart .icon:hover {background-color: #fccfe8!important; stroke: black!important} 

.header-actions-action--cart .icon-cart-quantity:hover {color: black!important}

.header-actions-action--cart .icon-cart-quantity {color: #fbb7dd!important;}

 

 

website is: www.pretty-positive.co.uk
 

Try this CSS

/* move instagram to right */
.header-layout-branding-center-nav-center .header-actions--left {
    order: 4;
    justify-content: flex-end;
}
.header-actions.header-actions--right {
    order: 5;
}

Thank you so much! @tuanphan

Can I also ask..

I have created a folder for my main navigation and titled it 'store'. I have then added my store categories to the main navigation to put them into the folder - so people can filter down what part they'd like to view. BUT on mobile when they click in to view the cateogories, the font is HUGE. What code would target this type of sub-folder menu?

(currently not visible on my website and obviously not working)

Thank you!

On 10/22/2022 at 11:24 PM, prettypositivejksnmedia said:

Thank you so much! @tuanphan

 

Can I also ask..

 

I have created a folder for my main navigation and titled it 'store'. I have then added my store categories to the main navigation to put them into the folder - so people can filter down what part they'd like to view. BUT on mobile when they click in to view the cateogories, the font is HUGE. What code would target this type of sub-folder menu?

 

(currently not visible on my website and obviously not working)

 

Thank you!

What is your site url + can you add it? We can check easier.

If the site is live, you can also add to a duplicate site

10 hours ago, tuanphan said:

What is your site url + can you add it? We can check easier.

If the site is live, you can also add to a duplicate site

so this is my duplicate website (some things different), but added into the 'store' folder so you can see- hopefully it works!

https://butterfly-cube-z252.squarespace.com (password: october) [lowercase]

firstly, on mobile the actual options in the folder are huge in font size,

secondly, how would i get the 'active navigation link hover' underline thingy, on this sub menu also.

thank you so much

On 10/26/2022 at 6:20 PM, prettypositivejksnmedia said:

so this is my duplicate website (some things different), but added into the 'store' folder so you can see- hopefully it works!

https://butterfly-cube-z252.squarespace.com (password: october) [lowercase]

 

firstly, on mobile the actual options in the folder are huge in font size,

secondly, how would i get the 'active navigation link hover' underline thingy, on this sub menu also.

 

thank you so much

Add to Design > Custom CSS

h2.nested-category-title.nested-category-title-padding {
    font-size: 20px;
}
.header-nav-item>a, .header-nav-folder-item>a {
    border-bottom: 2px solid transparent;
}
div.header-nav-folder-item a:hover {
    border-color: #fccfe8;
}

On 10/31/2022 at 8:19 AM, tuanphan said:

Add to Design > Custom CSS

h2.nested-category-title.nested-category-title-padding {
    font-size: 20px;
}
.header-nav-item>a, .header-nav-folder-item>a {
    border-bottom: 2px solid transparent;
}
div.header-nav-folder-item a:hover {
    border-color: #fccfe8;
}

 

Thank You, this worked for the active link, but the font sze on mobile view is still incorrect. (see image) 

On 11/1/2022 at 7:50 PM, prettypositivejksnmedia said:

Thank You, this worked for the active link, but the font sze on mobile view is still incorrect. (see image) 

Use this

div.header-menu-nav-item * {
	font-size: 16px !important;
}

Hi @tuanphan

My site is pretty-positive.co.uk

is it possible to code my header (which are 2 folders), to be with a large gap between - ideally central underneath my social media buttons.

Sorry to be so awkward, basicallyi'm putting 2 businesses onto the same site to cut costs, but want them to feel fairly separate.

Thank you for any help you can provide.

3 hours ago, prettypositivejksnmedia said:

Sorry to be so awkward, basicallyi 'm putting 2 businesses onto the same site to cut costs, but want them to feel fairly separate.

Please see the following as a possible direction.

If your site is established then you'll want to make sure to use URL Mappings so that search engines can update where things are on your site.

On 1/24/2023 at 8:41 PM, creedon said:

Please see the following as a possible direction.

If your site is established then you'll want to make sure to use URL Mappings so that search engines can update where things are on your site.

Thank you, but it says I don't have permission to see the content 😞

20 minutes ago, prettypositivejksnmedia said:

it says I don't have permission to see the content

Apologies. I'll summarize.

The basic idea is to use Brad Good's multi-language site code as a way to organize your two sites in one. The code Brad provides needs a modification to work with a site with multiple sub-sections with more than two characters in the sub-section path. Read the article. When you see language mentioned there think site sub-section.  

If you think this technique might work for your situation, tuanphan and I worked on a code modification for this, let us know.