2 Replies Latest reply: Aug 29, 2013 11:21 AM by jefferis RSS

    Search Icon in Nav Menu... adjust?

    jefferis Community Member
    jefferis Aug 20, 2013 7:20 PM

      Hi folks,

      Having a bit of trouble finding the right css to modify to get this magnifying glass search icon to appear in the middle of the Nav menu bar  instead of at the top.

      I have tried to modify background image position, padding, margin, etc. with no effect... I tried enlarging the image but it cuts off in the middle if I do that...

       

      I was trying to modify it in the base.css here: https://joden.worldsecuresystems.com/

       

      I am just not finding the proper fix.  I can modify it in element in inspector but that doesn't translate to a known class...

      TIA

      Jeff

        • 1. Re: Search Icon in Nav Menu... adjust?
          thetrickster888 Community Member
          thetrickster888 Aug 26, 2013 1:53 PM (in response to jefferis)

          Right now the CSS for that search button link is being rendered inline... so instead of you being able to modify the CSS by class you have to modify the "style" attribute on the A element (link) itself.  I'm pretty sure that your search icon is being rendered with the menu module somehow although I can't find how to add inline styles via the menu module right now, but there's an easy fix without messing with your menu module.

           

          Right now in your style.css file on line 557 add the following CSS definitions to your "#nav a" selector:

           

          min-height: 16px;

          background-position: 50% 50% !important;

           

           

          If you add that CSS to your "#nav a" rule you should be all set.  What's happening is that there's inline CSS setting the background-position to "initial initial" and if you don't use the '!important' declaration in your CSS the inline CSS will be the most specific and will override your CSS for background-position in "#nav a". 

          • 2. Re: Search Icon in Nav Menu... adjust?
            jefferis Community Member
            jefferis Aug 29, 2013 11:21 AM (in response to thetrickster888)

            Thank you again for your help. It worked like a charm.   I had tried to add that background position code to another rule and could not, for the life of me, get it to function!