-
AuthorPosts
-
March 21, 2019 at 8:11 pm #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.
March 25, 2019 at 12:16 am #1082412Hey 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.
Best regards,
MikeMarch 25, 2019 at 6:31 pm #1082792Hi 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
March 26, 2019 at 3:31 am #1082942Hi,
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,
MikeMarch 26, 2019 at 2:16 pm #1083117Hi 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
March 27, 2019 at 6:33 am #1083425Hi,
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,
MikeMarch 27, 2019 at 1:44 pm #1083594Hey 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
March 28, 2019 at 3:40 am #1083894Hi,
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 -
AuthorPosts
- The topic ‘Button (or text with Link) at header top just to left of Search’ is closed to new replies.