Return to previous page

Static Header help - by timlord - on WordPress WooCommerce support

This topic has 8 replies, 4 voices, and was last updated 8 years, 9 months ago ago by Jack Richardson

timlord

Participant

July 7, 2015 at 12:45

Hi there,

I’m loving your theme but I don’t want the header, menu, logo etc to change when a user scrolls down the page.

Is it possible to please help me out with the css code that would be needed in order to make the header area sticky but not change to a different version when the user scrolls down the page.

So for example, on your header varients page – https://www.8theme.com/demo/woopress/lookbook/header-variants/

Using Inspect Element I can see that when the page loads it uses the “header main-header” and then when the page scrolls down it changes to “fixed-header”

I don’t want to show the fixed header at all and only display the main-header part at the top of the page all the time, without it changing to anything else (other than on mobile or tablet)

If you can please help me out I would be very grateful indeed.

Kindest regards
Tim

#73668 Copied Theme version: 2.0

7 Answers

Robert Hall

Support staff

July 7, 2015 at 13:41

Hello,

If I understood correctly then you can disable Fixed navigation in Dashboard->Theme Options->General.

Regards,
Robert Hall.

#73677 Copied

timlord

Participant

July 9, 2015 at 23:40

No, you have misunderstood. I want the header to stay the same but I want it to be sticky.
So it should be static at the top of the page but not change at all from the original.
Can you help with this please?

I want header-main-header to remain at the top of the page all the time and not move or change

#74380 Copied
Eva Kemp

Support staff

July 10, 2015 at 15:46
Hello,

Please add this code in custom.css file:
```
.header-wrapper {
    position: fixed;
    z-index: 1000;
    background-color: white;
    width: 100%;
}
```
```
.rev_slider_wrapper {
  margin-top: 135px !important;
}
```
Regards,
Eva Kemp.
#74548 Copied
timlord

Participant

July 11, 2015 at 18:48

Hi Eva,

That worked, it sorted the header out and now it is static BUT – it has also changed the positioning of the actual page.

Now my breadcrumbs background image no longer displays correctly because th majority of the image falls behind the header.

You can view it here – http://webtest.com.gridhosted.co.uk/xparticles/contact/

I have disabled the text from showing in the breadcrumbs but I do want to show a different image on most pages so I have added some code to remove the text like this.

.page-heading #breadcrumb, .page-heading .delimeter, .back-history, .page-heading a, .page-heading .woocommerce-breadcrumb, .page-heading .title {
font-family: Helvetica;
text-transform: capitalize;
display: none !important;
}

However, I would also like to show the full size image in the breadcrumbs area and have it scale as well so that it will show the full image on all resolutions, can you help me with this please?

Many thanks for your help

Kidnest regards
Tim

#74676 Copied
Eva Kemp

Support staff

July 13, 2015 at 09:09
Hello,

Try to use this code in custom.css:
```
.page-heading {
    padding-top: 20% !important;
    background-size: 100% 50%;
}
```
Regards,
Eva Kemp.
#74761 Copied
timlord

Participant

July 15, 2015 at 20:39

That didn’t work, it seems to have messed all the alignments up.
Is there a way to display the breadcrumb area image without any of the breadcrumb text but keep the same sizes for everything?

Is it also possible to have the background image scale with the page?

#75449 Copied

Jack Richardson

Support staff

July 16, 2015 at 14:03

Hello,

Sorry, but in case if you want to have static header and display different breadcrumbs image for each page you need to create new sliders for a separate page and use slider instead of page title and breadcrumbs in the page editor.

Best regards,
Jack Richardson.

#75562 Copied
Tagged: help, persuasive, seo friendly, static header, themes, wordpress woocommerce
Viewing 8 results - 1 through 8 (of 8 total)