Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 5, 2019 at 12:51 pm #1050313
    Anton

    Hi guys,
    Happy new year,

    I’ve got a little problem with my logo on my second Enfold website (https://msinternational.eu), that I’m preparing right now. Had no this kind of issues with my first (https://www.newpointdeview.com).
    So, on https://msinternational.eu the logo is oversized and I don’t know what to do (settings or custom css—I’ve tried both) to fix it. If I change ths css in order to reduce the logo size, the logo remains stuck at the top of the area, and when scrolling the page the shrinking header doesn’t really work. I mean the logo becomes half hidden.
    Please, help!

    January 6, 2019 at 1:10 am #1050442
    Mike

    Hey Anton,
    It seems that you have this css causing the issue.

    .logo {max-width: inherit !important;padding-top: inherit !important;}

    If you want to set a max-width please use a number, “inherent” takes it’s size from the parent element.
    I assume that you are trying to have the same logo and header action as this page:
    https://www.newpointdeview.com/blog/sommaire/

    If you didn’t add that css, or if this doesn’t help, Please include a admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    January 6, 2019 at 12:29 pm #1050552
    Anton

    Hi Mike,
    the code you’ve mentionned is mine. For now I’ve postponed it. You can see the result (https://msinternational.eu). This is what I had from the very beginning. And the original code was:
    .logo {max-width: 200px; padding-top: 40px;}
    And yes, I’d like the same result as at https://www.newpointdeview.com/blog/sommaire/ (which is the same on all pages of this website)

    January 6, 2019 at 7:32 pm #1050605
    Mike

    Hi,
    I see that the top padding for the logo is 40px, which is why on scroll half of the logo is hidden, if you change it to 15px the logo will be centered. I’m just not sure if this was set from the options or custom css.

    .logo {
    max-width: 200px;
    padding-top: 40px;
}

    But this still doesn’t allow the logo to shrink on scroll so please ensure that option is set from your theme settings.

    Best regards,
    Mike

    January 6, 2019 at 8:41 pm #1050621
    Anton

    Hi,
    I’m not sure you’ve understood my request at the beginning. This is excatly what I said: I don’t know where the code
    .logo {max-width: 200px; padding-top: 40px;}
    is from. So I changed it to
    .logo {max-width: inherit !important;padding-top: inherit !important;}
    With this code the logo is all right, but I don’t know how to master its length and centering as well. So can you, please, advice me the necessary code for that ?

    January 7, 2019 at 12:11 am #1050686
    Mike

    Hi,
    Sorry, I see that your header has this class “av_header_shrinking_disabled” so you shrinking header is disabled.
    If you only want to set the size of the logo, please remove your css with the “inherit” and use this instead:

    .logo {
    max-width: 400px !important; 
    padding-top: 10px !important; 
}

    just adjust the width and padding to suit.

    Best regards,
    Mike

    January 7, 2019 at 5:37 pm #1050973
    Anton

    Hi,
    I’ve activated the header shrinking, but I’ve also added Header Custom Height 48px. So the shrinking issue is resolved de facto.
    My last issue : the logo on iPad screen. Please visualise it https://msinternational.eu on iPad.
    Can you, pease, give me the necessary code to adapt and center it, as necessary, on all iPad screens, the same way it already works on mobile phones

    January 8, 2019 at 2:48 pm #1051401
    Mike

    Hi,
    Glad to hear you were able to sort it out.
    Unfortunately I don’t have a iPad, but when I try to emulate it, it looks like the screenshot in Private Content area.
    Is this how you are seeing it on the iPad? If not I could ask for another team member with a iPad to take a look for you.

    Best regards,
    Mike

    January 8, 2019 at 4:35 pm #1051431
    Anton

    Hi,
    I don’t have an iPad either. And this is what I see on my emulation

    January 9, 2019 at 5:18 am #1051573
    Mike

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 767px) and (max-width: 1050px) {
#top #wrap_all .av_header_transparency {
    background-color: #000000 !important; 
    color: #ffffff;
    border-color: #000000;
}
.phone-info {
    float: none !important; 
    width: 100%;
    clear: both;
    text-align: center !important; 
}
 #top .logo {
    height: 100px !important;
    max-width: 60% !important;
}
#top .av-main-nav .menu-item-avia-special {
    display: block !important; 
}
#top .av-main-nav .menu-item {
    display: none !important; 
}
}

    I set the max-width to 1050px, but feel free to adjust to suit.

    Best regards,
    Mike

    January 10, 2019 at 12:43 am #1052133
    Anton

    Here’s the code I’ve finally found for my layout (https://msinternational.eu/kosiko-en-tyvek/) : 

    /*Logo area for iPad*/
@media only screen and (min-width: 767px) and (max-width: 989px) 
{#top #wrap_all .av_header_transparency {background-color: #000000 !important; color: #ffffff; border-color: #000000;}
.phone-info {float: none !important; width: 100%; clear: both;}
#top .logo {height: fit-content; max-width: 67% !important;}
#top .av-main-nav .menu-item-avia-special {display: block !important;}
#top .av-main-nav .menu-item {display: none !important;}
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {height: 48px !important; line-height: 48px !important;}
.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {line-height: 48px !important;}}

/*Logo area for Mobile*/
@media only screen and (max-width: 767px) 
{.responsive #top #wrap_all .av-logo-container, .responsive #header_main .container, .main_menu .av-main-nav > li > a {height: 48px !important; line-height: 48px !important;}
.responsive #top .logo {height: inherit !important;}
.avia-menu.av_menu_icon_beside {margin-right: inherit;}
.responsive #top #header .main_menu .social_bookmarks {margin-top: -32px;}}

    Let’s keep the topic open for a while, I’ll probably need to readjust things later. Thanks

    January 10, 2019 at 6:13 am #1052174
    Mike

    Hi,
    Thanks for sharing your solution, we will leave this open.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.