Can't get CSS code working for Mobile Menu

  • Resolved dunks80

    (@dunks80)


    9 years, 11 months ago

    Hi Guys, I’m having trouble with my mobile menu http://www.leafrootfruit.com.au

    After moving the menu icon to the left on the mobile screens, the menu headers now show up right. I’ve been trying to use this thread but it’s not working for some reason.

    I’ve also tried, without success, to play around with the menu button as per this thread, which makes me think there’s something overriding my style.css coding specifically related to the mobile menu?

    I’ve tried deactivating all the plug-ins, as per other threads in case there is a conflict but that didn’t help. Any ideas on what I’m doing wrong?

Viewing 9 replies - 1 through 9 (of 9 total)
  • rdellconsulting

    (@rdellconsulting)

    9 years, 11 months ago

    Try this:

    .nav-collapse.tc-hover-menu-wrapper {
  position: relative;
  top: -10px;
  width: 15%;
}

    Thread Starter dunks80

    (@dunks80)

    9 years, 11 months ago

    Thanks, but its moved the desktop menu left and squished it up. The mobile menu has not changed (I’ve left it ‘as is’ for you to see)

    rdellconsulting

    (@rdellconsulting)

    9 years, 11 months ago

    Woops, sorry. Try this:

    .navbar.resp .nav-collapse.tc-hover-menu-wrapper {
  position: relative;
  top: -10px;
  width: 15%;
}

    Thread Starter dunks80

    (@dunks80)

    9 years, 11 months ago

    The desktop is back to normal, but the mobile menu remains unchanged. There must be something preventing the mobile menu from changing?

    Rocco Aliberti

    (@d4z_c0nf)

    9 years, 11 months ago

    what do you want to achieve for you mobile menu?

    Thread Starter dunks80

    (@dunks80)

    9 years, 11 months ago

    Currently the menu button is left of screen, but when you click it and bring the drop-down menu, the menu links are all aligned to the right.

    I want to align the menu links to the left, under the button.

    Rocco Aliberti

    (@d4z_c0nf)

    9 years, 11 months ago

    You have this in your style.css:

    .navbar .nav {
    display: block;
    float: right;
    margin: 15px 10px 0 0;
    position: relative;
}

    Make it become this:

    .navbar.notresp .nav {
    display: block;
    float: right;
    margin: 15px 10px 0 0;
    position: relative;
}

    Thread Starter dunks80

    (@dunks80)

    9 years, 11 months ago

    Wee hoo! Thanks so much.

    Rocco Aliberti

    (@d4z_c0nf)

    9 years, 11 months ago

    You’re welcome 😀

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Can't get CSS code working for Mobile Menu’ is closed to new replies.

Tags