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

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

Home Forums Support Search icon close button position in mobile while using nav as header option

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #847292
    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…?

    #847568
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #847939
    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…

    #848080
    David
    Staff
    Customer Support

    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;
        }
    }
    #848726
    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

    #848938
    David
    Staff
    Customer Support

    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?

    #848949
    Alan Gautham

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

    #849001
    David
    Staff
    Customer Support

    So instead of the above, try this CSS:

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

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

    #849720
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.