Navigation
Archive / Navbar layout on iPad mini
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • May 13, 2016 at 8:04 am #989659
    Pablo
    Participant

    When displaying my website aurafashion.be in landscape mode on an iPad mini, the menu is not in one single row anymore. Can you give me a css code so the menu scales or becomes a responsive menu when being viewed on an iPad mini?

    May 13, 2016 at 10:13 am #989804
    Joao
    Moderator

    Hi There,

    Please try adding this code to your Appereance / Customizer / Custom / CSS

    I believe the 7px is a good size, but you can try to change to 6px or 8px or any other value to achieve the best results.

    @media only screen and (min-width:  768px) and (max-width: 1230px) {

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 7px;
  padding-right: 7px;
}
}

    Hope that helps,

    Joao

    May 19, 2016 at 3:32 am #999017
    Pablo
    Participant

    Hi Joao,

    actually it doesn’t do the trick. I even changed the padding to 1 px to see te result, but everything stays the same.

    May 19, 2016 at 4:26 am #999083
    Lely
    Moderator

    Hello Pablo,

    Please try updating the CSS to this:

    @media only screen and (min-width:  768px) and (max-width: 1230px) {

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
}

    The CSS was not added in the customizer but instead it is on siteorigin-custom-css. The customizer settings override it.
    Hope this helps.

    May 21, 2016 at 2:18 am #1002691
    Pablo
    Participant

    Ok that did it. Thanks!

    May 21, 2016 at 4:16 am #1002764
    Christopher
    Moderator

    You’re welcome.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-989659 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>