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

Navigation background color and portfolio style

Question

Hello, 

I would like to remove the background color from my navigation header but only on some pages. What would be the correct code snippet for it? 

Is it also possible to make a portfolio grid fullwidth and show a short description under the project title? 

My website is https://dove-turkey-3mnz.squarespace.com/
Password: cs

I use Squarespace 7.1

Thanks for your help! 

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1
53 minutes ago, coralinart said:

I would like to remove the background color from my navigation header but only on some pages. What would be the correct code snippet for it? 

Find the unique page ID of the pages you wish to remove the white background. To find the ID, right-click anywhere on the page and choose "view source".  Press Ctrl+F or Cmd+F and in search type "body" to locate your body tag. The ID will show right next to body tag and starts with "collection-...". Copy the whole string as shown below. In the code below I'm using your homepage unique ID.

Let me know if it works!

#collection-5dd16c5c6be9a958a6e8f080 .header-announcement-bar-wrapper {
    background-color: transparent;
}

 

Share this post


Link to post
  • 0

Thank you! This helped a lot. But I had to use this code on the advanced settings of the page: 

<style>  
body:not(.tweak-transparent-header) .header-announcement-bar-wrapper {
    background-color: transparent;
 }
</style>

But now I'm not able to change the color of the burger navigation icon. The code below won't work. 

.burger {
    color: #fff;
}

 

Share this post


Link to post
  • 0

I'm glad you found a solution for the first issue!

For the burger menu...

If you want to change the background box of the burger menu:

.burger {
    background-color: #FFF!important;
}

If you want to change the color of the lines:

body:not(.tweak-transparent-header) .burger-inner::before, body:not(.tweak-transparent-header) .burger-inner::after {
    background-color: #FFF!important;
}

Share this post


Link to post
  • 0
23 hours ago, coralinart said:

Now it works but the weight of the lines is too thin and I would like to only show the navigation while if it's inactive. 

Hi @coralinart The lines weight look fine on my end, but if you want to make it thicker, increase the border thickness to 2px:

body:not(.tweak-transparent-header) .burger-inner::before, body:not(.tweak-transparent-header) .burger-inner::after {
	background-color: #FFF!important;
	border: 2px solid #fff;
}

I don't understand what you mean by only showing the navigation while it's inactive... isn't it what it is doing? Can you clarify?

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...