Return to previous page

Desabling main header when in mobile view

This topic has 24 replies, 3 voices, and was last updated 2 years, 8 months ago ago by Olga Barlow

nicolino

Participant

May 14, 2021 at 07:40

Hi,
How can i desactivating main header, i need only sticky header when in mobile view ?
I can’t find options to quickly choose where enabled main header (like it is in header sticky)

Thank you by advance

#287460 Copied Theme version: 7.2.6

23 Answers
Rose Tyler

Support staff

May 14, 2021 at 08:01
Hi,

There is no such option, but you can try to use the next custom CSS code:
```
.site-header:not(.sticky-on) {
    display: none;
}
```
Theme Options > Theme custom CSS > custom CSS for mobile

Regards
#287468 Copied
nicolino

Participant

May 14, 2021 at 08:08

Nice it works but sticky header is not shown until i begin to scroll and i need it to be fixed always visible when in mobile view.
In tablet and large screen views i’m gonna use the one in place (main header + sticky custom one when scrolling)

Thank you in advance.

#287472 Copied

Olga Barlow

Support staff

May 14, 2021 at 12:38

Hello,

Point is that the Sticky header is one or a few areas of the main header that become sticky once you scroll (appear either on scroll to top if you use Smart type of sticky header or always if you use Sticky type). So, I don’t understand why you hide the header if you want to show that. I’m confused.

Regards

#287522 Copied

nicolino

Participant

May 27, 2021 at 00:21

Hi and thanks for your support and answer.

What i needed was how to fix mobile header.
Just need my mobile header to stay in place fixed and i don’t succed to find the option / command to realize this.

Thanks by advance

#289022 Copied

Olga Barlow

Support staff

May 27, 2021 at 09:54

Hello,

Then don’t hide anything and go to Sticky header settings and enable Sticky type for both desktop and mobile https://prnt.sc/13h1281

Regards

#289071 Copied

nicolino

Participant

May 27, 2021 at 12:15

Hi, i”ve attached a video to explain my problem and needs.
Thx by advance in helping me to fix this problem.

Please contact administrator
for this information.

#289094 Copied

Olga Barlow

Support staff

May 27, 2021 at 14:47

Hello,

Thank you for your video.
Provide us with WP Dashboard access to your site. We’ll check the settings in more detail to find out what gives you that space.

Regards

#289113 Copied

nicolino

Participant

May 27, 2021 at 19:26

Ok thanks a lot.
But strange i get this problem in all my xstore websites.

Thanks by advance

Please contact administrator
for this information.

#289133 Copied

Olga Barlow

Support staff

May 28, 2021 at 13:54

Hello,

Check now, please.

Regards

#289207 Copied

nicolino

Participant

May 31, 2021 at 11:17

It’s perfect as i needed.
Thanks so much.

But please can you tell / show me how to achieve this ?
Cause i need the same for my others Xstore projects and every time i encounter the same situation (margin bottom too large and when trying in custom mode to play with height the result is not the one expected)

Thx by advance

#289419 Copied

Olga Barlow

Support staff

May 31, 2021 at 14:04

Hello,

1) Remove all the negative margings for the page content sections.
2) Enable header overlap option for the mobile header and remove empty connection block from the bottom header on mobile.
That’s all.
If you need to fix the issue for other sites provide us with WP Dashboard access to these sites.

Regards

#289466 Copied

nicolino

Participant

June 8, 2021 at 12:54

Hi and thanks a lot can you please check and fix the same issue to this other website ?
In this case using same infos / config than in my first project that you customize i can’t see header.
There is no a basic config that causes no troubles when in mobile view ?

Please contact administrator
for this information.

#290267 Copied

Olga Barlow

Support staff

June 8, 2021 at 13:36

Hello,

Check now, please.

Regards

#290279 Copied

nicolino

Participant

June 8, 2021 at 16:07

Hi and thanks.
But in this case there is no way to set fixed sticky header without changing from header to sticky when in mobile view ?
Cause it’s not really clean visually in this case.

Thx in helping me please

#290293 Copied

Olga Barlow

Support staff

June 9, 2021 at 19:51

Hello,

Check the mobile header now. Is it what you want to achieve? Or you prefer the fixed logo for the mobile header?

Regards

#290424 Copied

nicolino

Participant

June 9, 2021 at 20:25

No in mobile mode i need sticky header to be fix and no main header.
Cause in this way i can change logo and add a tiny one and i can also have less margin and paddin.

Did you notice in main header than by changing height header and margin and botton in desktop mode mobile mode is also changed in the same way ?

Thanks in helping me achieve this

#290427 Copied

Olga Barlow

Support staff

June 10, 2021 at 12:31

Hello,

Replaced default logo with fixed logo on mobile. Check again.

Regards

#290511 Copied

nicolino

Participant

June 10, 2021 at 21:15

Here is a quick video to better explain what i need

Please contact administrator
for this information.

#290571 Copied

Olga Barlow

Support staff

June 11, 2021 at 11:32

Hello,

But I have already made this https://gyazo.com/1f042671a087d03a38f174cb9e8aa767 using custom CSS
Did you check on the real device instead of the header builder?

Regards

#290628 Copied
1 2

Viewing 20 results - 1 through 20 (of 24 total)