Hi,

Thank you Ismael for your help, its a good approach and works on large monitors. However, from a screen width of smaller than 768px, there are styling inconsistencies:

We can wrap the code inside a css media query so that it doesn’t affect the mobile view, or to keep the default header layout on smaller screens.

@media only screen and (min-width: 989px) {
  #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a, #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a img {
    max-height: 59px !important;
    height: 59px !important;
    line-height: 59px !important;
  }

  #top:not(.home) #header .av-logo-container .main_menu li a {
    height: 59px !important;
    line-height: 59px !important;
  }

  #top:not(.home) #main {
    padding-top: 64px !important;
  }
}

Best regards,
Ismael

Hi,

Have you tried to clear the browser cache or test on another browser? It might be serving old entries or results. The same error doesn’t display on our end as you may have seen in the screenshot above.

Best regards,
Ismael

Hi,

@Borlabs: Thank you for the info. I completely missed or forgot that patch. Would you mind sharing the details about the solution in this thread? It might help other users in the future.

Best regards,
Ismael

Hi,

We did check the staging site previously and we couldn’t reproduce the issue. We refreshed the page a few times just to check if the issue is still random but we are not able to reproduce it anymore. We checked the site on Firefox Windows 10.

Best regards,
Ismael

Hi,

Thank you for the clarification.

We can still use the same script above, but we’ll target the masonry content instead of the featured image.

Please look for this line:

if($(e.target).hasClass('av-masonry-image-container')) {

Replace it with:

if($(e.target).hasClass('av-masonry-entry-content')) {

Best regards,
Ismael

Hi,

Thank you for the update.

This css code should remove the right border of the instagram icon.

#top .social_bookmarks li:last-child {
	border-right: 0;
}

Best regards,
Ismael

Hey Magnus,

Thank you for the inquiry.

The link tag in the language switcher container is duplicated, but the other is empty. To remove the empty link, we can use this css code.

.av-main-nav li:nth-last-child(2) a:first-child {
	display: none !important;
}

Best regards,
Ismael

Hi,

Hi Ismael, are you sure about this?

Yes, the browser still loads the image because it’s still in the DOM and the browser expects that there’s still a possibility that the image will be manipulated by a script later on. One example is a slider with multiple images — only the first image or slide is visible on page load but the browser will still request all images in the slider.

And please note that in the section.php file, we moved the image URL in the data-src attribute, so the script will only apply the value of the data attribute either as background image or the value of the src attribute on page load. This might also affect the lazyload option.

$params['data'] = "data-src='{$src}' data-section-bg-repeat='{$repeat}'";

Unfortunately, we are not exactly sure how the lazyload option works in that plugin, so we might not be able to help you further in this case.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can start with this css code to remove the icon and adjust the position of the slide content so that it’s above the slide image or the purple box. It might require some adjustments specially on mobile view.

#top .avia-content-slider .slide-image .fallback-post-type-icon {
	display: none !important;
}

#top .avia-content-slider .slide-content {
	position: absolute;
	top: 0;
	color: #ffffff;
	padding: 10px;
        width: 100%;
}

#top .avia-content-slider .slide-entry-title.entry-title, #top .avia-content-slider .slide-entry-title.entry-title a {
	font-size: 17px;
	color: #ffffff !important;
}

Best regards,
Ismael

Hi,

@Missca: Where can we see the issue? Please open a new thread and provide the necessary details in the private field so that we can check it properly. We’ll close this thread for now.

Best regards,
Ismael

Hey dbideaz,

Thank you for the inquiry.

Have you tried adjusting the bottom padding of the first menu item?

#menu-item-11 {
	padding: 126px 3px 361px 3px;
}

Or we can use flexbox to control the size of the menu items.

.html_header_sidebar .container_wrap {
	width: 100%;
	height: 100%;
}

.html_header_sidebar #header .container {
	height: 100%;
}

.html_header_sidebar #header .av-main-nav {
	display: flex;
	flex-direction: column;
}

.html_header_sidebar #header .av-main-nav, .html_header_sidebar #header .av-main-nav-wrap {
	width: 100%;
	height: 100%;
}

.html_header_sidebar #header .av-main-nav > #menu-item-11 {
	height: 70%;
}

The very last css declaration defines the height of the first menu item.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can use this css code to adjust the position of the phone info container where you added the booking button.

.phone-info {
	position: absolute;
	right: 10px;
}

To hide it on mobile view, use this css code.

@media only screen and (max-width: 767px) {
    .phone-info {
	display: none;
    }
}

You can also set the logo to the center by adjusting the Menu and Logo Position settings in the Header > Header Layout panel.

Best regards,
Ismael

Hi,

Thank you for the update.

We have added this css code in the Enfold > General Styling > Quick CSS field to fix the issue.

#wrap_all {
    position: relative;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The menu seems to be displaying as it should now. Have you tried purging the cache, or disabling the Performance > File Compressions settings?

Best regards,
Ismael

Hi,

Thank you for the update.

Are you using a cache plugin? There should be a dedicated button to purge the cache manually. If you’re not using any plugin, you can ask your hosting provider if your server is actually storing or caching any data and if it can be deleted manually.

Best regards,
Ismael