Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1081546

    Hello.

    Is there a way to put a button element (or text with a link) just to the left of the Header Search icon (magnifying glass)? Our home page is below.

    Thanks.

    #1082412

    Hey clbdcnpafe,
    Sorry for the late reply, Try adding this code to the end of your functions.php file in Appearance > Editor:

    function event_link(){
      ?>
      <script>
    (function($){
      $(function() {
    $(document).ready(function(){
        $('nav.main_menu').prepend('<a class="event-link" href="http://www.google.com">Event Link</a>');
      });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'event_link');

    Then add this css to your Quick CSS:

    .event-link {
    float: left;
    margin-top: 22px;
    }

    Be sure to change the url in the code above to where you want the link to go to.

    Results:
    2019-03-24-180943

    Best regards,
    Mike

    #1082792

    Hi Mike,

    No apologies necessary for any delay. Good things take time. We value your help a lot. This worked perfectly.

    One more question: to the right of the hamburger menu, there is a header top-to-bottom grey separator line. Is it possible to put one of those to the left of the Search icon (i.e. to the right of the link we are adding in)?

    Thank you again for your help.

    CB

    #1082942

    Hi,
    Thank you, to add the separator on the left, please add this to your css:

    .avia-menu.av_menu_icon_beside {
        border-left-width: 1px !important; 
        border-left-style: solid !important; 
    }

    Best regards,
    Mike

    #1083117

    Hi Mike,

    Again, thank you. A problem has arise regarding the original solution you provided for the link in the header.

    On smartphones or equivalent small screens, the link text appears over the (left side) logo rendering a confusing page-top for the website visitor.

    Ideally, the solution would be for the link text NOT to appear at all on small screens, rather than trying to squeeze it in there – too stuff for people to read.

    So, is there a way to limit the link’s appearing so that it shows only on larger screens – maybe some code equivalent to the way we can set Screen Options in various elements?

    In the meantime, in the functions.php file (In Enfold Child!), we have commented out the code you provided but have kept it in place.

    Again, thank you…and if you are ever in Washington DC, lunch is on us!

    Best…CB

    #1083425

    Hi,
    For mobile and tablet devices the page gets the class “avia_mobile” and for desktop the page gets the class “avia_desktop”
    so I have changed the script to only show the link when the page has the class “avia_desktop”

    function event_link(){
      ?>
      <script>
    (function($){
      $(function() {
    $(document).ready(function(){
    if ($("html").hasClass("avia_desktop")) {
        $('nav.main_menu').prepend('<a class="event-link" href="http://www.google.com">Event Link</a>');
      }
    else {
          
      }
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'event_link');

    Please try this out instead of the other code in the functions.php, but also use the css code as it is still needed.
    Thank you for the lunch offer, that is really nice, I’ve been thinking about going there :)

    Best regards,
    Mike

    #1083594

    Hey Mike!

    Thank you again. Solution works! I’ve included in the private content the key line of code that has the link as we have modified it; the link is appearing on desktops and laptops but not smaller screen sizes. Whether green is the right color … well … we’ll decide that after a glass or two of wine … :)

    Your lunch awaits anytime you get here!

    Best,

    CB

    #1083894

    Hi,
    Thanks for sharing your code updates, and glad this works for you.
    Thanks again for the lunch offer :)

    We will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Button (or text with Link) at header top just to left of Search’ is closed to new replies.