Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 22, 2017 at 11:57 am #880191
    innobitag

    Hi there,
    i still have troubles finding the right codes for adjusting the logo in the header. There are some screen sizes where the logo is overlapping with the menu (tablet sizes). Logo position and logo size is also changing depending on the screen size. This should be stay consistent.

    These are the codes i’ve used so far:
    /*** HEAD ***/
    .logo{width:190px;}
    .logo a img {margin-top:15px;}

    /*** LOGO ADJUST ***/
    @media only screen and (max-width: 1070px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block !important;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special a { border: none !important; }
    }

    What it should look like(no matter what screen sizes):
    – logo always in same spot (padding top bottom / left aligned)
    – logo always in same size
    – no menu overlapping

    Thanks a lot for your help.
    Timo

    November 22, 2017 at 12:11 pm #880202
    Yigit

    Hey Timo,

    Can you please post a link to your website? :)

    Best regards,
    Yigit

    November 22, 2017 at 12:26 pm #880210
    innobitag

    Home-3

    Thanks Yigit

    November 22, 2017 at 1:37 pm #880237
    Yigit

    Hi,

    You are currently using an older version of the theme. Please update it to 4.2 – kriesi.at/documentation/enfold/updating-your-theme-files/

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width:635px) and (min-width: 480px) {
.logo img {
    max-width: 30%!important;
}}

    Best regards,
    Yigit

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