Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 9, 2016 at 4:08 am #595274
    Julie

    Hello!

    I wanted to make it so the 2nd-level submenu would appear on the right of the 1st-level submenu. Found the following thread: https://kriesi.at/support/topic/submenu-items-open-to-left-change-to-right/#post-384541 and adjusted that code to this:
    .sub-menu .sub-menu { left: 205px !important; }

    Worked great, except the 2nd-level submenu is now too far to the right in the mobile menu.

    How can I fix this on mobile views?

    A link to the site is below.

    Thanks in advance for your help!

    March 9, 2016 at 5:22 am #595297
    Vinay

    Hey again Julie!

    Please change the left value 205px to 20px or anything close to 20 to suit your design :)

    Something like this 

    .sub-menu .sub-menu {
    left: 20px !important;
}

    Regards,
    Vinay Kashyap

    March 9, 2016 at 5:35 am #595305
    Julie

    Hey Vinay,

    How do I designate it is only for the mobile view?

    I would list the code I used but I deleted it and couldn’t figure it out again– I started with media devices and max width 990px (so feature phones would be included), and I think I made the left value 5px.

    It looked perfect on the mobile view but moved the logo in the logo area over to the right on the desktop view for some reason, so it was covering the first couple of main menu items.

    Can you help me with the right selectors?

    Thanks!

    March 9, 2016 at 6:35 am #595324
    Vinay

    Hey!

    Please use media queries to target styles in mobile

    /* For screen size less than tablets */
@media only screen and (max-width: 767px) {
 /* Your CSS here */
}

    The one below is for screens larger than tablets

    /* For screen size more than tablets */
@media only screen and (min-width: 767px) {
 /* Your CSS here */
}

    In your case it would be the first one 

    /* For screen size less than tablets */
@media only screen and (max-width: 767px) {
 .sub-menu .sub-menu {
    left: 20px !important;
}
}

    For more specific media queries please check this link https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Regards,
    Vinay Kashyap

    March 9, 2016 at 10:42 pm #595869
    Julie

    Works perfectly. Thought I tried that, but I must have had a typo or something.

    Thanks so much for the helpful information– I am sure it will save you some work in the future. ;)

    You guys are always so great– thanks again!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Adjust submenu alignment in mobile menu’ is closed to new replies.