[Support request] mobile header not sticky by default

[Cagdas]

Greetings,
1)In mobile view i want sticky header should by default on but its coming only when scrolling down .

2)Phone icon for mobile header is not displaying center of the header.

3)when i m adding svg html in editor its taking but when later i trying to edit anything – svg code is disappearing from editor .Not sure why ?

Please guide for these three points

Thanks

[David]

Hi there,

1. Did you resolve this ?

2. Try this CSS:

@media (min-width: 360px) {
    .main-navigation .mobile-bar-items {
        position: absolute;
        top: 0;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }
}

It only affects screens over 360px or otherwise it is too close or on top of your logo on small devices.

3. Which editor are you using ? Is it the classic editor?

[Cagdas]

1) No still first it showing transparent header for mobile and when scrolling down then only sticky header showing

2)Tried but only for landscape its perfect but for portrait you can see still its not center.

3)Normal editor which it comes with generatepress

[Tom]

1. The sticky header will only appear when it’s needed (when it becomes sticky). You can tell the standard mobile header to always be white with this CSS:

#mobile-header {
    background: #fff;
}

2. It is actually technically in the center, but it may not seem that way because your logo (left) is wider than the content on the right. I don’t believe it’s possible to center the icon between those two elements.

3. If you’re using the block editor, make sure to use the “HTML” block. It shouldn’t strip any of your SVG HTML unless the HTML itself is broken.

[Cagdas]

Greetings,
1)I m ok with it . Can you guide me how we can make mobile menu drop down open in center ;like this site https://www.toporlandorealestateagents.com/ instead of opening in left like by default generatepress theme has ?

2)ok

3)Please login to admin

Pages – Home – Edit – 5 th section from top label name : 2 Column — Try to switch between text and visual mode and You can see p tag above “Global Deneyim” is blank .Now if i will edit any content and update ,icon will disappear as p tag was showing blank in edit view of html

[Tom]

Hi there,

1. I’m not seeing anything custom about the mobile dropdown on that site – it all looks default. Which part are you looking at, specifically?

3. If you’re switching between Text and Visual, it means you’re using the old Classic editor. That editor will strip HTML it deems invalid, which was one of the frustrations with that editor.

Instead, I suggest using the new Block editor in WordPress. It has a block specifically for HTML which will prevent this issue from happening.

[Cagdas]

Greetings,
1)Please see on below url -Mobile menu drop down covers entire screen but in generateress by default it opens from left and half of screen.
http://ezonesolutions.com/berlitznew/wp-content/uploads/2020/03/screen.png

Thanks

[Tom]

Ah, opening from the left/right is our Off Canvas Panel: https://docs.generatepress.com/article/off-canvas-panel-overview/

[Cagdas]

Greetings,
Its not abt left and right ,please watch carefully the example site and what we have. What we need is it should cover entire screen like example site .

Thanks

[Tom]

It should by default. Where is that not happening? The mobile menu toggle on the site you originally shared in your post isn’t working at the moment.

[Author]

Posts