Bedford: Make navigation bar partially transparent?

I would love to find a way to make the navigation bar/header in Bedford partially transparent.

Looks like it can be solid color or fully transparent, but not seeing an in-between option. I tried the transparency slider underneath the color picker, but even when you move the slider, transparency does not change. Any ideas?

CSS:

#header #mainNavWrapper {
 opacity: 0.3;
}

Hi Nick, I tried putting that in the CSS but it made the navigation menu options transparent, not the solid block of color that sits BEHIND the navigation menu options. Sorry if I was unclear!Thanks, do you have any more ideas? I have a feeling this is very very close....

I am having the same problem! An fresh Ideas?

best regards

Peter

Consider posting a link to your site so people in the community can help. Different configurations may require different CSS code. People are guessing unless they can inspect your site.

I would love an answer to this too please!

In the Style Editor under SITE HEADER, make sure the option that says "Transparent" is checked on. In the custom CSS you can add:

 .transparent-header #header { background-color: rgba(255,255,255,0.7); }

Here's a temporary example of that working: http://scd-bedford.squarespace.com

I ended up just making the whole header opacity less than 100% Did not even touch the option in the styles. I also made it fixed so it is always at the top of the page.

#header {
 position: fixed;
 padding: 0;
 height: 150px;
 background-color: rgba(0,84,97,0.85)!important;
}

http://ganterpresseundbuch.clarify-it.com/d/fj636m

After I inserted the coding it just shows me a black bar on the top, like you can see in the link.Any help is appreciated. I would like to have the header to be sticky!

You need to put this code into the custom CSS editor and not the Code Injection area.

You can put it into code injection but you have to put at the end. But it is better to put it into the Custom CSS Editor.

Here is my site that I am working on currently as an example: https://utopiaprint.squarespace.com/

Thank you soooo much for your help!

This code works well to fix the bar and make it transparent, however, I’m finding that with a fixed bar, the content no longer shows after the bar - meaning the content on each page now starts at the very top of the page under the bar. This means that for my pages with header text, the header text actually shows under the bar.

Temporarily, I’m using a fix which makes the margin on the top of individual page elements (e.g. banners, images, etc) a certain height, however, I feel there must be a way to simply say - don’t let anything on any page start until after the banner. The setting of margins for all the elements seems overly complicated and creates a thin gap under the nav bar on mobile.

Sample margin code:

.view-list .banner-thumbnail-wrapper,
.collection-type-page .banner-thumbnail-wrapper,
.collection-type-index .banner-thumbnail-wrapper {
 margin-top: 75px; /* nav bar height */
}

@isabellemt – I’ve formatted the code in your answer. To format code, just highlight the lines of code and use the 5th button in the toolbar:

I have changed your inline comment to use the CSS syntax: /* comment goes here */ – just in case anyone copies and pastes your code without editing it.

You can use this code for one page, adding the code in the Page Header Code Injection Section in the Page settings of the page:

<style>
   #header {
     position: fixed;
     background-color:rgba(255,255,255,0.25)!important;
   }
</style>

.transparent-header #header { background-color: rgba(255,255,255,0.7); }

This one works like a charm. I was wondering if you can enable the transparency only while scrolling. Here's an example: http://www.ouurcollection.com/

Hello Dammacx,

I entered in the code you provided, and it worked great! I adjusted the height and the rgba colour to match my colour scheme and logo.

I have run in to one problem on my product pages though. The categories are now behind the navigation and the site header follows the page down when scrolling. Do you have any suggestions for a fix?

I'm using the Pacific template, here's my site: www.coswebb.ca and here is a link to a page with the problem: www.coswebb.ca/shop-online/maple-sugar