Background container for floating topnav?

GoodEye · August 7, 2013

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 · August 8, 2013

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

byoshi · August 14, 2013

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 · August 14, 2013

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 · August 14, 2013

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 · August 14, 2013

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 · August 14, 2013

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 · August 14, 2013

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 · August 14, 2013

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.

Background container for floating topnav?

Comments