Return to previous page

Stylizing header - by webgod - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 9 years, 9 months ago ago by Eva Kemp

webgod

Participant

January 31, 2015 at 16:26

Hi,

I am confused on how to accomplish some styling for the header areas

1. I set the home page to have a semi-transparent dark navbar area over the slider. However, when scrolling down, the header turns white. I would like this to stay the same color/transparency.

2. Secondary pages: they all default to a white nav bar even before scrolling. I would like this to be like the main page: http://atomiccoffee.com/swim/product-category/mens/

3. I was also wondering if it’s possible to add a full width image that fills the title/nav bar area that I now put as gray…. maybe possible that this to be similar to slider (but with static image) where it extends up to the top?

If it’s possible to do the above, can the image be set per page (i.e. each page would have a different image)

#38555 Copied

3 Answers
Eva Kemp

Support staff

January 31, 2015 at 17:55
Hello,

1. Please add this code in custom.css file:
```
.fixed-header-area {
    background-color: transparent;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
}
```
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

2. Sorry, but there is no such possibility for other pages.

3. You can set background image for breadcrumbs in Theme Options > Header > Breadcrumbs background. Unfortunately there is no option to have different breadcrumbs on each page.

Thank you.
Regards,
Eva Kemp.
#38570 Copied
webgod

Participant

February 1, 2015 at 17:58

I have started getting the results I want… thanks! Another question… please scroll down on the any page (http://atomiccoffee.com/swim/).

Notice that the fixed header is off, causing things to shift off screen on top.

#38628 Copied
Eva Kemp

Support staff

February 2, 2015 at 09:29
Hello,

Please try to use this code in custom.css file:
```
.fixed-header-area .fixed-header > .container {
    margin-top: 20px !important;
}
```
Thank you.
Regards,
Eva Kemp.
#38671 Copied
Viewing 4 results - 1 through 4 (of 4 total)