Archived topic
Search icon close button position in mobile while using nav as header option
9 replies · Started by Alan Gautham on March 23, 2019
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...?
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 :)
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...
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;
}
}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
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?
🙂Yes thats right.(while using navigation as header option).
So instead of the above, try this CSS:
.mobile-bar-items .close-search a {
position: absolute;
right: -40px;
}That did the job👍
Thanks a lot for your time.
Have a nice day
You're welcome.
