Header properties staying same while scrolling

[cipros]

Hi,

may I ask for help, guys? I want to have a transparent header full-width and NOT having any animations when scrolling. Just staying the same whole time.

I.e. two questions:
1) How can I make it full width? It’s not full width now (see attachement).

2) How can I make it sticky but nor animating, nor resizing, just staying exactly the same.

Thanks,

Simon

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

You can select a different header from theme options => header options => header layout => no.6

OR, you can can add this CSS to your theme options custom CSS input:

.layout-fullwidth .fw-header.container { padding: 0!important; }

2) This is a little trickier, but please start by setting the Logo Height and Logo Resized Height to be the same. Located in theme options => header options.

Thanks,
David.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.header-overlay.layout-fullwidth .fw-header.container, .header-overlay.layout-fullwidth .fw-header .container{
padding:0px !important;
}

Thanks
Mohammad

[cipros]

Hi Mohammad,

thanks, that helped but the logo and search icon are still moving. Doesn’t look very nice. Any suggestion?

Thanks,

[David Martin – Support]

Hi,

To stop the resize movement, please use this also.

.sticky-header .row {
    margin: 0 auto!important;
}

Thanks,
David.

[cipros]

Hi,

thanks, this works out fine.

Can you please help me also with the header height? Just to have it smaller then now and alway the same height even when scrolling.

Thx,

Simon

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

#header,.is-sticky > .sticky-header{
height:52px !important;
}

Thanks
Mohammad

[cipros]

Thanks!

[David Martin – Support]

Thanks Mohammad, glad it’s resolved.
-David.