Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1483340

    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,
    S

    #1483433

    Hey 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,
    Ismael

    #1483443

    Hi 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
    S

    #1483470

    Hi,

    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;
      }
    }

    View post on imgur.com

    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,
    Ismael

    #1483487

    Hi 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.

    #1483592

    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,
    Ismael

    #1483595

    Hi 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,
    S

    #1483600

    Hi,

    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,
    Ismael

    #1483603

    Hi 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,
    S

    p.s. Pasted the link in the private content section

    #1483655

    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,
    Ismael

    #1483836

    Hi 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,
    S

    #1483896

    Hi,

    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);
      }
    }

    View post on imgur.com

    Best regards,
    Ismael

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