• Resolved nootkan

    (@nootkan)


    Was wondering if someone could help me figure out how to get my last submenu under the treatment menu to open to the left instead of to the right? I’ve tried a couple of thinks like left: auto !important;
    inside the .main-navigation ul ul ul {left: 100%;top: 0;border-top:none;} but that didn’t work. Also tried it in the other lines of css with no luck either. Here is the complete css in styles.css:

    .main-navigation {clear: both;display: block;font-weight: 700;font-family: ‘Lato’, sans-serif;position: relative;border-bottom: 3px solid #04A3ED;background: #0065a1;}

    .main-navigation .ak-container{padding:0 !important;}

    .main-navigation ul {list-style: none;margin: 0;padding: 0;}

    .main-navigation li {display: inline-block;position: relative;line-height:28px;font-size:18px;text-transform: uppercase;color:#ababab;white-space: nowrap;}

    .main-navigation.menu-right{text-align: right;}

    .main-navigation.menu-center{text-align: center;}

    .main-navigation.menu-right li{margin-left: 25px;margin-right:0;}

    .main-navigation.menu-center li{margin-left: 12px;margin-right:12px;}

    .main-navigation a {display: block;text-decoration: none;color: #FFF;padding: 0 18px;}

    .main-navigation ul ul {box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);display: none;left: 0;position: absolute;z-index: 99999;background: #FFF;top: 100%;border-bottom: 3px solid #04A3ED;border-top: 3px solid #04A3ED;transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}

    .main-navigation ul li.more-menu-item > ul{right:0;left:auto;}

    .main-navigation ul ul ul {left: 100%;top: 0;border-top:none;}

    .main-navigation ul ul a {min-width: 150px;padding: 0;}

    .main-navigation ul ul li {font-size: 16px;line-height: 18px;border-bottom: 1px solid #DDD;margin: 0 !important;padding:10px 15px;display: block;text-align: left;text-transform: none;}

    .main-navigation ul ul li:last-child{border-bottom: none;}

    .main-navigation li:hover > a {background: #04A3ED;}

    .main-navigation ul ul li:hover > a ,
    .main-navigation ul ul li.current-menu-item > a {color:#01AEFD;}

    .main-navigation ul ul a{color: #666;background: none !important;}

    .main-navigation ul ul a:hover {}

    .main-navigation ul li:hover > ul {display: block;}

    .main-navigation .current-menu-parent > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_parent > a {background: #04A3ED;}

Viewing 1 replies (of 1 total)
  • Thread Starter nootkan

    (@nootkan)

    The only way I could resolve this was to move the menu tab to the beginning of the nav bar. Thought someone would be able to help me with this but oh well.

Viewing 1 replies (of 1 total)
  • The topic ‘How to make sub menu open to the left?’ is closed to new replies.