Home Forums Weaver Xtreme Theme Search icon placement/color options

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #67869
    gunfacts
    Participant

    Weaver Xtreme Support Plugin Version: 4.4.5

    WordPress 5.6.2

    What are the options for moving the location of the search “magnifying glass” icon? Placed over my existing header image, it gets lost (and I don’t want to change my graphics to fit theme limitations)? Alternately (though less desirable) a means for setting a background color under the icon. IIRC under Weaver II Pro, the search was on the menu bar, which was very visible.

    Here’s what it looks like now:

    Likewise, is there a means for moving search to a menu item, because it gets totally lost on mobile devices.

    #67870
    scrambler
    Moderator

    Please provide a link to your site and explain precisely where you want to move the search

    You can add the search icon to the menu bar using the search shortcode (see addons page), inside the menu HTML area.

    Then you can hide the one in the header

    #67879
    gunfacts
    Participant

    Thanks. This is getting me closer.

    URL: http://www.gunfacts.info/

    1. I managed to get the search shortcode (thanks) but …
      1. Having trouble getting it to right-align (have not worked up a custom class yet).
      2. Don’t see where to change to color (unless that can only be done with the custom class).
    2. Any guidelines how to change this depending on device type? For example, the search box is too big for mobile, just right for desktop.

     

     

    #67881
    scrambler
    Moderator

    The HTML of the Menu Righ HTML with the search box is as follow

    <span class="wvrx-menu-html wvrx-menu-right hide-none"><div class="weaverx-plus-search gfsearchcss"><form style="display:inline;" role="search" method="get" class="search-form" action="http://www.gunfacts.info/">
    <label><span class="screen-reader-text">Search for:</span>
    <input style="max-width:80%;" type="search" size="10" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
    </label></form></div></span>

    The HTML box has a right margin of 1.5em that you can remove with the rule
    .wvrx-menu-right {margin-right:0px;}

    It has a top margin you can remove with
    .wvrx-menu-html {margin-top:0px;}

    The background color can be changed with the rule
    .search-field, #header-search .search-field:focus, .menu-search .search-field:focus {background-color:white;}

    By size do you mean width or height.
    You can change the default 2em height and 80% width on mobile with the rule
    .is-mobile .search-form input[type=search] {height:1.5em;max-width:50% !important;}

    All CSS rule go in the theme Global Custom CSS Rule box

    #67884
    gunfacts
    Participant

    Great. Thanks! This gets me 95% of the way home. The rest if fiddling about on my side.

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