Jump to content

Navigation background color and portfolio style

Recommended Posts

  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply
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;
}

 

Link to comment

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;
}

 

Link to comment

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;
}
Link to comment
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?

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.