Support request for some modifications of header in case of 3 widgets in there - Support

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
April 29, 2025 at 2:36 pm #1483340

Enfoldfanatic
Participant

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

May 1, 2025 at 7:31 am #1483433
Ismael
Moderator
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
May 1, 2025 at 8:46 am #1483443

Enfoldfanatic
Participant

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

May 2, 2025 at 6:08 am #1483470
Ismael
Moderator
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
May 2, 2025 at 8:32 am #1483487

Enfoldfanatic
Participant

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.

May 5, 2025 at 6:48 am #1483592
Ismael
Moderator
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
May 5, 2025 at 8:38 am #1483595

Enfoldfanatic
Participant

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

May 5, 2025 at 9:24 am #1483600

Ismael
Moderator

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

May 5, 2025 at 9:30 am #1483603

Enfoldfanatic
Participant

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

May 6, 2025 at 5:19 am #1483655

Ismael
Moderator

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

May 8, 2025 at 9:27 am #1483836

Enfoldfanatic
Participant

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

May 9, 2025 at 6:12 am #1483896
Ismael
Moderator
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
June 8, 2025 at 12:54 pm #1485219

Enfoldfanatic
Participant

Hi Ismael,

I have added the following css according to your hint:

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

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

In general it works but 2 things are not yet as targeted:
– The header area (logo + widgets) on the right side are taking the full width of the screen (while on left they nicely start within the container)
– The menu items are centralized while the 1st item should start simply left within the container of 1380px.

I’ll paste the URL in the private content.

Thanks and regards,
S

June 9, 2025 at 6:29 am #1485229
Ismael
Moderator
Hi,

1.) You can adjust the width of the widgets inside the header to reduce the gaps between them and create space on the right side.

Example:
```
.responsive #top #header #header_main .inner-container .widget:nth-child(3) {
    order: 2;
    flex-basis: 10%;
}
```
Try to do the same for the other widgets, then apply a right margin to the last one.
```
.responsive #top #header #header_main .inner-container .widget:nth-child(5) {
    margin-right: calc(50% - 570px) !important;
}
```
The value of 570px is based on the maximum container width of 1340px.

2.) Try removing the padding from the menu container and set its width.
```
.responsive #top #header #header_main .inner-container .main_menu .avia-menu.av-main-nav-wrap {
    padding: 0 50px;
    width: 1340px;
}
```
Best regards,
Ismael
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.