[Resolved] Search icon close button position in mobile while using nav as header option

[Alan Gautham]

Presently using the below css to place nav search active close button at the last.

#mobile-header .nav-search-active + .site-logo + .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}

How to modify this code to get same result when using new navigation as header option on mobile…?

[Tom]

Hi there,

Any chance you can link me to your site? The CSS depends on the markup.

As a guess, I would try replacing #mobile-header with .main-navigation

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alan Gautham]

Hi Tom
I tried replacing #mobile-header with .main-navigation
Its not working🙁
You can check it here…
https://wpalan.com
Using navigation as header option now…mobile header is off…

[David]

Try moving the toggle instead:

@media (max-width: 768px) {
    .main-navigation.has-branding .menu-toggle {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan Gautham]

Hi David…Thank you for the code…header layout is fine by using this code…
But still on some sites I wld prefer to keep toggle at the end…
Like to know whether it is possible to do that while using navigation as header option?
Thank you

[David]

So you want the menu toggle to remain to the right? But when the search is open the search bar extends the full width of the header? Is that what you’re after?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan Gautham]

🙂Yes thats right.(while using navigation as header option).

[David]

So instead of the above, try this CSS:

.mobile-bar-items .close-search a {
    position: absolute;
    right: -40px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan Gautham]

That did the job👍
Thanks a lot for your time.
Have a nice day

[David]

You’re welcome.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts