-
Posts
-
Hi guys,
With support of this particular article https://kriesi.at/documentation/enfold/example-of-logo-left-widgets-right-menu-below/#toggle-id-2 I was able to build up the desired header- menu structure including 3 widgets in the header area and the menubar shown below.
I’m trying to achieve some minor modification on which I haven’t been successful until now. I would like to:
– Ensure the menu has a full width so that the created drop shows has a full width stretch over the screen (but off course keep the menu items within the container
– Ensure that the hamburger menu is on the same level – row as the logo in case of smaller viewports. Currently it jumps under the logo on a new row
– I would like to “move” the search function into the 3rd widget and not show it on the right side of the last menu item. However I could find the html/ shortcode to locate the actual search function in the 3rd widget.I’ll paste the URL in the private content.
Thanks for your support!
Kind regards,
SHey Enfoldfanatic,
Thank you for the inquiry.
1.) You can adjust this in the Enfold > Main Menu > Burger/Mobile Menu > Menu Overlay Style settings. Set it to Full Page Overlay Menu.
2.) To align the menu with the logo on mobile view, add this css code:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #header #header_main .container.av-logo-container .inner-container { display: flex; } .responsive #top #header #header_main .inner-container .main_menu { order: 2; flex-basis: auto; top: 20px; } }3.) Could you provide a screenshot showing where you’d like the search icon to display?
Best regards,
IsmaelHi Ismael,
Thanks for your reply. I think point 1 got misunderstood a bit, this is not actually not related to the mobile menu but to the menu style of large screens. As you can see there is a slight top shadow on the menu bar. But the menu is limited to the with of the container. I would like that the drop-down shadow is shown to the full width of the page. Let me post an Enfold project in the private content to show what I mean.
Regarding the search icon, I have already placed a fontawesom icon in the 3rd widget to illustrate the desired position of the search icon. So I would like to find out how to actually activate the search function from that position.
The hamburger position on mobile worked out good by the way, thanks for that.
Regards
SHi,
Thank you for the update.
You can try this css code to adjust the width of the header:
@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ #top #header #header_main .container.av-logo-container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .responsive #top #header #header_main .inner-container .logo { margin-left: 70px; } .responsive #top #header #header_main .inner-container .main_menu .avia-menu.av-main-nav-wrap { padding: 0 50px; } .responsive #top #header #header_main .inner-container .widget:nth-child(5) { margin-right: 50px; } }Regarding the search form, please check this thread:
— https://kriesi.at/support/topic/how-to-move-the-search-box-into-the-sidebar/#post-1074058
Best regards,
IsmaelHi Ismael,
Thanks for your reaction, this last thread puts the whole search box in a certain element (sidebar in this particular case). As you can see in the screenshot my intention is to only add the search icon into the header which will show the pop up search field when clicking on it. Exactly like when adding the search function in the menubar.
Is there a chance to alter the code to only include the search icon and trigger the same pop up field when clicking on it?
Regards,
S.Hi,
Thank you for the update.
Try to use this shortcode instead:
function avia_search_cb() { ob_start(); ?> <span id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special" role="menuitem"> <a class="avia-svg-icon avia-font-svg_entypo-fontello" aria-label="Search" href="?s=" rel="nofollow" title="Click to open the search input field" data-avia-search-tooltip='<?php echo esc_attr(" <search> <form role='search' action='" . home_url() . "' id='searchform' method='get'> <div> <span class='av_searchform_search avia-svg-icon avia-font-svg_entypo-fontello' data-av_svg_icon='search' data-av_iconset='svg_entypo-fontello'> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='25' height='32' viewBox='0 0 25 32' preserveAspectRatio='xMidYMid meet' role='graphics-symbol' aria-hidden='true'> <title>Search</title> <desc>Search</desc> <path d='M24.704 24.704q0.96 1.088 0.192 1.984l-1.472 1.472q-1.152 1.024-2.176 0l-6.080-6.080q-2.368 1.344-4.992 1.344-4.096 0-7.136-3.040t-3.040-7.136 2.88-7.008 6.976-2.912 7.168 3.040 3.072 7.136q0 2.816-1.472 5.184zM3.008 13.248q0 2.816 2.176 4.992t4.992 2.176 4.832-2.016 2.016-4.896q0-2.816-2.176-4.96t-4.992-2.144-4.832 2.016-2.016 4.832z'></path> </svg> </span> <input type='submit' value='' id='searchsubmit' class='button' title='Enter at least 3 characters to show search results in a dropdown or click to route to search result page to show all results' /> <input type='search' id='s' name='s' value='' aria-label='Search' placeholder='Search' required /></div> </form> </search> "); ?>' data-av_svg_icon="search" data-av_iconset="svg_entypo-fontello"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="32" viewBox="0 0 25 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"> <title>Click to open the search input field</title> <desc>Click to open the search input field</desc> <path d="M24.704 24.704q0.96 1.088 0.192 1.984l-1.472 1.472q-1.152 1.024-2.176 0l-6.080-6.080q-2.368 1.344-4.992 1.344-4.096 0-7.136-3.040t-3.040-7.136 2.88-7.008 6.976-2.912 7.168 3.040 3.072 7.136q0 2.816-1.472 5.184zM3.008 13.248q0 2.816 2.176 4.992t4.992 2.176 4.832-2.016 2.016-4.896q0-2.816-2.176-4.96t-4.992-2.144-4.832 2.016-2.016 4.832z"></path> </svg> <span class="avia_hidden_link_text">Search</span> </a> </span> <?php return ob_get_clean(); } add_shortcode('avia_search', 'avia_search_cb');Best regards,
IsmaelHi Ismael,
Thanks for your reply, this doesn’t seem to work. I’m not able to save this snippet into a widget code block because of some errors in the code. I have added the code into a general page. Please find attached a screenshot of the result.
Regards,
SHi,
I’m not able to save this snippet into a widget code block because of some errors in the code.
You have to add the code in the functions.php file, then use the [avia_search] shortcode in a text or html widget. Please try it again.
Best regards,
IsmaelHi Ismail,
Thanks for the hint, I implemented this now and it works. However the pop up layer is shown below the menu in terms of layering. Do I need to add soms z-index code to ensure it’s always shown on top?
Regards,
Sp.s. Pasted the link in the private content section
Hi,
Do I need to add soms z-index code to ensure it’s always shown on top?
Yes, you have to adjust the z-index of the widget containing the search icon.
Best regards,
IsmaelHi Ismael,
The search element inclusion in the header worked out great. The full width menu shadow however didn’t turned out right, please see the shared link once more. The CSS snippet basically made the page full with (which indeed push the shadow from edge to edge. However I do would like to keep the container 1340px width and not force the website full screen.
If you zoom out on the page you can see that the full width effect is kept. Is there a way to keep the website within the 1340px container but do keep the menu bar background effect (top shadow) full width? I will drop another Enfold project where this is the case (no custom header however)
Kind Regards,
SHi,
We may need to adjust the maximum width of the nav menu itself and the left/right margin of the elements in the top header including the logo and the custom header widgets.
/* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ .responsive #top #header #header_main .inner-container .main_menu { order: 5; flex-basis: 100%; align-items: center !important; align-self: center !important; justify-content: center !important; height: inherit !important; margin-bottom: 0px; } .responsive #top #header #header_main .inner-container .main_menu .avia-menu { max-width: 1340px; } .responsive #top #header #header_main .inner-container .logo { margin-left: calc(50% - 570px); } .responsive #top #header #header_main .inner-container .widget:nth-child(5) { margin-right: calc(50% - 640px); } }Best regards,
Ismael
- You must be logged in to reply to this topic.