Jump to content

Bedford: Make navigation bar partially transparent?

Recommended Posts

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?

Link to comment
  • Replies 15
  • Views 26k
  • Created
  • Last Reply

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....

Link to comment
  • 1 month later...
  • 2 weeks later...
  • 4 months later...

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 */

Link to comment

@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:

Use the source

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.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 2 months later...

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:

   #header {
     position: fixed;

Link to comment
  • 10 months later...
  • 1 year later...

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

One day I will work for [Brad Good][1]. [1]: https://www.bradgood.net/

Link to comment


This topic is now archived and is closed to further replies.

This topic is now 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.