Hi there. I recently updated WP and the Enfold theme and have a few issues I’m still trying to resolve with the header. The site is http://www.bhutantravelbureau.com

1) On an ipad the social icons are appearing beneath the logo in portrait mode instead of aligned to the right.

Also on the Ipad, the sticky logo and navigation are not minimising, and don’t appear to be transparent.

2) On smartphones the logo now appears quite small after applying the custom CSS required to stop the logo stretching across the entire screen and behind the menu icon. It also doesn’t line up next to the menu toggle, appearing above it instead.

The CSS I have applied is as follows:
@media only screen and (max-width: 768px) {

.responsive .mobile_slide_out .logo {
float: none;

}

.responsive .logo a, .responsive .logo img {
height: auto !important;
margin-top: 8px!important;
max-width: 85%;}
.html_header_top.html_logo_center .logo {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}

.responsive #header .social_bookmarks {
position: relative;
margin-top: 10px;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%;
height: auto!important; }
}

Help to resolve this issue much appreciated. Cheers.

I would like to convert the following two lines I added to style.css into QuickCSS so the changes aren’t lost after the next update. Can you help me? It didn’t work.

#header_main .container, .main_menu ul:first-child > li a{ height:120px; line-height: 195px; }

/* sticky variation*/
.html_header_top.html_header_sticky #main{ padding-top:120px; }

I understoot that in the latest update, you removed the mobile dropdown menu (like in topflat.nl).
In a new install (polderflora.nl), on a mobile I can click a main navigation item, but I can’t reach the sub-items.
(Un)Checking “Hide Mobile Menu Submenu Items” doesn’t change anything.
Changing “activate for smartphones (768px)” into smartphones and tablets (990) only lets the whole navigation disappear on my test-mobile.

How can I make the sub-navigation clickable in mobile devices?

We have a couple of menu items in the socket menu and copyright text that are overlapping. The overlapping occurs when the browser is at tablet width, the menu then pushes to next line in mobile sizing. Website is wildcatmattress.com

Here is the custom styling, as is, in child theme

@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #socket .sub_menu_socket {
float: left !important; }}

@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #scroll-top-link {
display: block !important;
}}

@media only screen and (max-width: 479px) {
.responsive #socket .sub_menu_socket {
display: block !important;
}}

Thank you.