Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 9, 2018 at 10:02 pm #1007706
    friendlier

    Hi,

    I’ve a slightly oversized logo that I’ve set to bleed to the left-hand-side of a box layout

    https://jmp.sh/wF6F4gT

    but this degrades badly on iPad

    https://jmp.sh/GZpRUXa

    So, I’ve added the following CSS:-
    ——
    @media only screen and (max-width: 1200px) {
    nav.main_menu {
    display: block !important;
    }
    #avia-menu .menu-item {
    display: none;
    }
    .av-burger-menu-main.menu-item-avia-special {
    display: block;
    }
    }
    ———

    However, this gives the following result, with no search icon and a burger menu that’s too far to the right.
    https://jmp.sh/wWuzBDT
    Please help – I just need these last two elements to be in place.

    Thanks!

    Simon

    September 10, 2018 at 7:11 am #1007780
    Rikard

    Hey Simon,

    Thanks for the screenshots, could you post a link to the page in question as well so that we can take a closer look please?

    Best regards,
    Rikard

    September 10, 2018 at 6:15 pm #1007985
    friendlier

    Done:-

    September 11, 2018 at 7:31 am #1008214
    Nikko

    Hi friendlier,

    Can you try adding this css code:

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

#top #avia-menu .av-burger-menu-main.menu-item-avia-special > a {
    padding-right: 13px !important;
}

    inside this media query code:

    @media only screen and (max-width: 1200px) {

    Hope it helps.

    Best regards,
    Nikko

    September 11, 2018 at 3:35 pm #1008438
    friendlier

    Hi Nikko,
    That does help!

    However, a couple of things – not sure if these are related (and instruct me to open a new thread if necessar, but:-

    Text in the sidebar has cropped:-

    https://jmp.sh/vYQZAVb

    For smaller displays, there’s crowding; also note that the logo doesn’t bleed to the left as in the larger sizes:

    https://jmp.sh/rYkt0Ug
    https://jmp.sh/NMDDMOM

    Thanks for your help on this!

    S

    September 12, 2018 at 7:28 am #1008759
    Nikko

    Hi friendlier,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:1024px) {
  #top #main .sidebar {
    word-break: break-word;
  }

  #top #main .inner_sidebar {
    margin-left: 30px;
  }
}

@media only screen and (max-width:767px) {
  .responsive #top .logo {
    max-width: 68% !important;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    October 23, 2018 at 6:27 pm #1025544
    friendlier

    Hi – that worked; thanks!

    October 23, 2018 at 8:14 pm #1025590
    Vinay

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Responsiveness issues; set logo to bleed and change padding for burger menu’ is closed to new replies.