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

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

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

Hi Ismael,

Please find the login details in the private content area.

Thanks and regards,
S

Hi Rikard,

Feel free to close the topic.

Regards,
Sheldon

I mean the masonry gallery indeed :)

Hi Ismael,

I’m posting a screenshot URL and the site link in the private content.

Thanks for your help!

Hi Ismael,

So the full snippet to paste in the Quick CSS should be the set below? I have updated the but without the desired effect.

/* Activate burger menu */
@media only screen and (max-width: 1224px) {
#top #header .av-main-nav>li.menu-item {
display: none !important;
}

#top #header .av-main-nav > .av-burger-menu-main, #top #header .av-main-nav > .menu-item-search-dropdown {
cursor: pointer;
display: block!important;
}

#top #header .av-burger-menu-main,
#top #header .menu-item-search-dropdown {
cursor: pointer;
display: block !important;
}
}

Kind Regards

Hi Ismael,

Thanks for your solution, the only thing is that the column which should have a fixed width is the 2nd column. Should I simply replace the “nth-child(1)” with “nth-child(2)” to apply the behavior on the 2nd column?

Kind Regards

Hi Ismael,

Works great! Thank for sharing this perfect solution.

Kind regards

Hi @guenni007,

Thanks for your help! Would it be also possible to adjust the hamburger + menu text position slightly? I would like to move the both a bit up since the hamburger is currently not aligned vertically in the mobile menu anymore.

Thanks and regards

Hi Mike,

I will post the URL in the private content, it regards the first container on the homepage. Indeed we would like to set a height of 50% of the hero container for the viewport up to 767px.

A max-height would probably would as well indeed, the content within the container will fit easily in there (50% space).

Regards,
S

Hi Guenni,

Thanks for your reply. This particular code snippet only lowers the height of the background, the overflow turns out grey. The inner content seems to “utilize” the height set within the ALB settings tab. There I have still set that the minimum height should be 90%. Should I change that as well?

Regards,
S

Hi Mike,

I’m sorry the initial code snippet did had affect. It just needed a few seconds, the issue seems to be solved. Does this particular “issue” has something to do with the latest versions of Enfold and WordPress? This since I haven’t experienced yet earlier.

Kind Regards,
S

Hi Mike,

After providing your response to Siteground they came with another reply. Please find the reply in the private content.

Regards,
S