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

Bedford: Make navigation bar partially transparent?

Question

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?

Edited by danieljs
retag

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 2

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

Edited by Dammacx

Share this post


Link to post
  • 1

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>



Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by neeklamy

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.

Share this post


Link to post
  • 0

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/

Share this post


Link to post
  • -1
Guest

CSS:


#header #mainNavWrapper {
 opacity: 0.3;
}

Share this post


Link to post
  • -1

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

Edited by isabellemt

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...