Background container for floating topnav?

GoodEye

I like how the horizontal navbar will scroll with the page, but since it's just floating white text, it becomes unreadable when it's over photos. Is there a CSS hack to add a background to the container?

Chris Schmauch
www.GoodEyePhotography.com

Cindy

I'm still looking for a how to as well…

byoshi

Was this discovered? Would like to add a black somewhat transparent border to the topnav as it scrolls. Not sure if I saw it in any other posts.

The Mechanic

Try adding the following CSS Code to a CSS Block for all pages:

.sm-page-widget-nav-toplink {
background-color: #1F1F21;
padding: 5px 10px 5px 10px;
border-radius: 5px;
}

This will add a button look around your text once you scroll down, it will currently match your top color so it looks hidden until you scroll.

macromeister

GoodEye wrote: »

I like how the horizontal navbar will scroll with the page, but since it's just floating white text, it becomes unreadable when it's over photos. Is there a CSS hack to add a background to the container?

Chris Schmauch
www.GoodEyePhotography.com

If you pin the HEADER in the layout section it pins the whole section and retains the colours.http://www.macromeister.co.uk/Images/Kitchen

RichmondImage

You don't need a hack. If you edit the theme (click the wrench next to your theme in the second tab) then choose to edit your background (second tab again) you can scroll down and find a few different options for creating a transparent header. You can be page or site specific. Choose a color for your header and then select the "alpha" which is the level of transparency. Hope this helps

RichmondImage

oh... and you can also use this, which will create a slight drop shadow around your text

div {
  text-shadow: 0 0 10px #000;
}

I used div so it will apply to all text, but you can change that to h1 or whatever the specific thing you want to highlight is

byoshi

macromeister wrote: »

If you pin the HEADER in the layout section it pins the whole section and retains the colours.http://www.macromeister.co.uk/Images/Kitchen

Looks like I'm using the same layout as GoodEye, and my header is the same. The header is pinned, but only the text remains when you scroll down.

macromeister

RichmondImage wrote: »

You don't need a hack. If you edit the theme (click the wrench next to your theme in the second tab) then choose to edit your background (second tab again) you can scroll down and find a few different options for creating a transparent header. You can be page or site specific. Choose a color for your header and then select the "alpha" which is the level of transparency. Hope this helps

Thank you for that! It's pretty cool. I have set my alpha header to 50%, but because I also have my menu buttons filled in with color anyway they are quite readable as normal, but the rest of the header is semi-opaque when scrolling down the page. http://www.macromeister.co.uk/Images/Kitchen But even the semi-opaque areas are quite readable, and you can still see the images underneath. Seems a good balance.