Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 16, 2017 at 2:06 pm #822016
    Panms

    Hi.

    I’ve got a problem with enfold 4.1.1.
    On a phone or a tablet in vertical way, my logo and burger menu are overlapping each other.
    Thats also because with the update, my social media icons in the mainheader are visible on phone and tablet. Never was before.
    I’ve never experienced this problems with version 4.0.7. Example: https://www.dropbox.com/s/3iakfhyiceyy2v3/screenshot.png?dl=0

    Can I disable/hide the social buttons only in phone and tabled, On pc they must be visable…?
    OR maybe better, move the logo to the left side so everything fits…

    Can I disable/hide the search function on the mobile version…?

    Thank you.

    July 17, 2017 at 5:42 am #822310
    Rikard

    Hey Panms,

    Please try the following in Quick CSS under Enfold->General Styling to move the logo to the left on mobile devices:

    @media only screen and (max-width: 1024px) {
.html_header_top.html_logo_center .logo {
    left: 0% !important;
    -webkit-transform: translate(0%, 0) !important;
    -ms-transform: translate(0%, 0) !important;
    transform: translate(0%, 0) !important;
}
}

    Best regards,
    Rikard

    July 17, 2017 at 8:57 am #822385
    Panms

    Thank you Rikard.

    On an Ipad or tablet it looks okay now.
    On a phone on horizontal mode its still overlapping, Maybe because the logo is a long one.

    Is it possible to hide the social icons in the header only in the phone version? That would solve the problem to I think.
    Is it possible to hide the search function on mobile devices?

    Thanks,
    Maarten

    July 17, 2017 at 9:13 am #822390
    Jordan Shannon

    Hi,

    Would you be able to enable right click/browser inspection on your site so we can see the proper tags we need to give you the right css to address your issue?

    Best regards,
    Jordan Shannon

    July 17, 2017 at 9:19 am #822400
    Panms

    Done :-)

    July 17, 2017 at 9:29 am #822412
    Jordan Shannon

    Hi,

    Try adding the following to quick css:

    @media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
.noLightbox.social_bookmarks.icon_count_5{
display:none!important;
}

.avia-menu.av_menu_icon_beside{
border-right-style:none!important;
}

#top #menu-item-search {
    display: none!important;
}

}

    Let me know if this works.

    Best regards,
    Jordan Shannon

    July 17, 2017 at 9:35 am #822419
    Panms

    Yes!! It works! You’re great. Thank you!

    Is it also possible to hide the searchicon on phone in vertical mode?

    Best Regards,
    Maarten

    July 17, 2017 at 9:41 am #822425
    Jordan Shannon

    Hi,

    Add the following:

    @media only screen and (max-width: 767px) {
    #top #menu-item-search {
    display: none!important;
    }
    }

    Best regards,
    Jordan Shannon

    July 17, 2017 at 9:49 am #822440
    Panms

    Hi, it seems the last code isn’t working….
    Is it possible to hide the searchicon on tablet in vertical mode?

    Best Regards
    Maarten

    July 17, 2017 at 10:01 am #822454
    Jordan Shannon

    Hi,

    This should work for tablets:

    
@media only screen and (max-width: 1024px) {
#top #menu-item-search {
display: none!important;
}
}

    Best regards,
    Jordan Shannon

    July 17, 2017 at 9:57 pm #822959
    Panms

    Workshop perfectly!!!
    Thank you very much!

    Best regards
    Maarten

    July 18, 2017 at 8:24 am #823139
    Panms

    Now i See that the tablet-version is oké. But on the phone the changes aren’t There anymore… :-(

    Please help,
    Maarten

    July 18, 2017 at 2:46 pm #823315
    Jordan Shannon

    Hi,

    Can you please add a screenshot?

    Best regards,
    Jordan Shannon

    July 19, 2017 at 8:26 am #823747
    Panms

    Hi Jordan.

    Here is a screenshot.
    https://www.dropbox.com/s/xjoe52hrfzxncle/Foto%2019-07-17%2008%2021%2034.png?dl=0

    Best regards,
    Maarten

    July 19, 2017 at 11:16 am #823854
    Victoria

    Hi Maarten,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 1024px) and (min-width: 768px) {
	.html_header_top.html_logo_center .logo {
        left: 26%;
    }
}
@media only screen and (max-width: 767px) {
	.responsive .logo img {
	    width: 60%;
	}
}
@media only screen and (max-width: 450px) {
	.responsive .logo img {
	    width: 80%;
	}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 25, 2017 at 3:13 pm #829662
    Panms

    Hi Victoria.

    I had a little vacation.
    I’ve testen and I removed the old code.
    It works! Perfect.
    Case closed :-)

    Best regards,
    Maarten.

    July 25, 2017 at 3:45 pm #829674
    Jordan Shannon

    Hi,

    I’m glad you were able to get this fixed. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Header/Logo problem Enfold Logo 4.1.1. on phone and tables’ is closed to new replies.