Fix the Header on Mobile

Hi,
Thank you for the login, to correct your mobile header I had to adjust your custom css for the social_bookmarks by putting it in a media query like this:

@media only screen and (min-width: 767px) { 
#top #header .social_bookmarks li a {
    font-size: 25px;
}
#top .social_bookmarks li {
     margin: 0 5px;
}
}

and I had to add your “make header larger & move over” css to another media query like this:

@media only screen and (min-width: 1440px) { 
	/* Make header larger & move over */
#header_main .logo, 
#header_main .logo a {
    overflow: visible;
}
#header_main .logo img {
    height: 90px;
    position: relative;
    max-height: none;
    right: -90px;
    top: 15px;
}
#top nav .social_bookmarks {
   float: right;
   left: auto;
   width: 10%;
}
}

But I notice your desktop your header widget is overlapping your social_bookmarks because you have it set to right: 300px;, I would recommend using right: 30%; instead.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike