Home Forums Weaver Xtreme Theme Search Icon Problems in Menu Bar

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #70717
    GR8FL
    Participant

    I would like just the search icon (magnifying glass) to appear on the menu bar on the right as the last item.

    I checked Add Search to Right under the Primary Menu Bar.

    The Right HTML area has text and is set to hide phones. What appears is the icon, but it was spaced too close to the text so I added six   after the text, and that seems to do the trick, but I don’t think it’s the best way to accomplish this.

    The Left HTML area has text that is set to hide Desktop & Tablets since I only want that to appear on phones. This text shows up fine, but now the search icon is hanging over the bottom of the menu bar in portrait mode. How can I move this icon under the menu icon (hamburger) and a little bit to the left?

    You can see this on the staging site: https://sdiaa-staging-two.sussexaa.org/

    Thank you.

     

     

    #70720
    scrambler
    Moderator

    Add space left of the search icon with the rule below

    .menu-search {margin-left:3em;}

    I do not understand what you are saying on phones.

    When I shrink the desktop browser to phone size, the search icon is left of the hamburger menu

    #70721
    GR8FL
    Participant

    I took a screenshot from my phone. But I don’t know how to display it here. There’s no URL to reference where the image lives.

     

    #70723
    GR8FL
    Participant

    Was able to paste it here. This is what I see on my phone.

    #70725
    scrambler
    Moderator

    Cant see it you have to host the image in the cloud somewhere and use the link to include it here

    #70726
    scrambler
    Moderator

    But I opened the site on my android phone and I see the two lines of text on the left, then the search icon, the hamburger and the work menu next to each other on the right and it looks fine

    #70727
    GR8FL
    Participant
    #70728
    scrambler
    Moderator

    Not what I am seeing, what device is that?

    Have you cleared all caches, including on the device

    have you checked on a different phone?

    #70729
    scrambler
    Moderator

    OK, so I see that happening on very narrow phones (below 345px)

    Adding the rules below should allow the search to stay in place by reducing the width on the hamburger from 5em to 4em, and the left margin of the search from 2em to 1em

    @media (max-width:345px){
    .is-mobile .menu-toggle-button {width:3.5em;padding-left:0;}
    .menu-search {margin-left:1em;}
    }

    #70730
    GR8FL
    Participant

    I have this rule in place already

    .is-mobile .genericon-wvrx-menu:after
    {content:”Menu”;font-size:85%; font-weight: bold;padding-left:5px;vertical-align:top;}
    .is-mobile .menu-toggle-button {width:5em;}

    What part of this should I replace with what you are suggesting? Or add this since it’s just specific to less than 345px?

    #70731
    scrambler
    Moderator

    The rules I gave you are to be added if you want to keep the spacing the way it is above 345px

    If you would rather apply it all the time, you can just change the values in your existing rules

    replace

    .is-mobile .menu-toggle-button {width:5em;}

    by

    .is-mobile .menu-toggle-button {width:3.5em;padding-left:0;}

    and replace

    .menu-search {margin-left:2em;}

    by

    .menu-search {margin-left:1em;}

    #70735
    GR8FL
    Participant

    .menu-search {margin-left:1em;} was had icon too close so I put it back to 2em.

    Otherwise, this is fantastic.

    Thank you.

     

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.