WordPress.org

Forums

Customizr
[resolved] Change fold out distance (8 posts)

  1. bertholdsson
    Member
    Posted 1 year ago #

    Hi
    I've been trying to find the code that decides the position of the fold out on the menus and sub menus.

    See image: http://bertholdsson.com/xu/public/image/direct/p-WMvWW5Go/menu.jpg

    Could someone point me in the right direction, i need the sub menus to fold out on the right side, not center.

    thanks
    /J├Ârgen

  2. bertholdsson
    Member
    Posted 1 year ago #

    Oh, and the site link: http://wwww.lyckseleds.se

  3. rdellconsulting
    Member
    Posted 1 year ago #

    Your link showing an Internal Server Error.

    You need to change this CSS:

    .dropdown-menu > li > a {
      clear: both;
      color: #333333;
      display: block;
      font-weight: normal;
      line-height: 20px;
      padding: 3px 20px;
      white-space: nowrap;
    }

    Would recommend testing in CustomCSS panel and then moving to a child theme, style.css

  4. bertholdsson
    Member
    Posted 1 year ago #

    Thanks, but it doesn't work. Looks like the theme dont take the new css-code

    Tried
    .dropdown-menu > li > a {
    clear: both;
    color: 00ff00;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 20px;
    white-space: nowrap;
    }

    With a new color but nothing happens. I tried it in style.css and Custom CSS

    Any other ideas?

  5. ElectricFeet
    Member
    Posted 1 year ago #

    Your color property value is missing a # prefix

  6. bertholdsson
    Member
    Posted 1 year ago #

    Thanks, the # made the color appear.

    But i can't understand what part adjust the horisontal placement og the foldouts? All levels...

  7. bertholdsson
    Member
    Posted 1 year ago #

    I dropped in the in the childs style.css

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }
    
    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
        display: block;
    }
    
    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }

    And the menu i placed as i want.. not sure why :-) The only problem now is that all submenus fold out at once...

    I guess it's solved

    It was the roots part on this site: http://imdev.in/twitter-bootstrap-multi-level-dropdown-menu-system/

    and this for hover-foldout

    /*make the menu sub-menu items drop down on mouse hover */
    ul.nav li.dropdown:hover > ul.dropdown-menu{
        display: block;
        margin: 10;
    }

    Result is here: http://www.lyckseleds.se if anyone is interested

  8. bertholdsson
    Member
    Posted 1 year ago #


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic