Jump to content


Photo
- - - - -

Bug in NavBar sub menu

navbar menu

Best Answer Danny , 06 October 2013 - 08:29 PM

Sorry the code I pasted didn't come out right, replace what I gave you with the following:

 
.navbar .navline.pull-right > li.menu-item-1765 .dropdown-menu .dropdown-submenu > a:after {
border-width: 5px 5px 5px 0;
border-right-color: #CCC;
}

.navbar .navline.pull-right > li.menu-item-1765 .dropdown-menu .dropdown-menu {
left: -100%;
right: auto;
margin-left: 0;
margin-right: -1px;
.border-radius(6px 0 6px 6px);
}
Go to the full post


  • Please log in to reply
25 replies to this topic

#21 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 October 2013 - 11:52 AM

OK, I see, I thought you were referring to the actual last menu item. At first I thought this may be related to your custom CSS (your child theme see as some strange CSS inside it). However, when I recreated your menu, it appears to be an issue with the length of your menu item or could be a bug with how the Bootstrap menu was designed. Either, I have reported this and for the meantime, add the following custom CSS as a band aid.
 border-width: 5px 5px 5px 0;
border-right-color: #CCC;
}

.navbar .navline.pull-right > li.menu-item-1765 .dropdown-menu .dropdown-menu {
left: -100%;
right: auto;
margin-left: 0;
margin-right: -1px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}


#22 OBourgeois

OBourgeois

    Advanced Member

  • Members

  • 69 posts
  • LocationLausanne
  • Framework Version:1.1.8 2.1.5
  • Country: Country Flag

Posted 06 October 2013 - 12:12 PM

hi

 

not sure to understand your 3 first ligne:

 

border-width: 5px 5px 5px 0;
border-right-color: #CCC;
}

 

i add the .navbar {...}  to our custom CSS and seems to solve the problem the submenu appear to the left now.

 

Keep me informed if the bug can be solved at an upper level to remove this hack in our custom CSS

 

Thanks a lot

 

Best regards

Olivier



#23 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 October 2013 - 08:29 PM   Best Answer

Sorry the code I pasted didn't come out right, replace what I gave you with the following:

 
.navbar .navline.pull-right > li.menu-item-1765 .dropdown-menu .dropdown-submenu > a:after {
border-width: 5px 5px 5px 0;
border-right-color: #CCC;
}

.navbar .navline.pull-right > li.menu-item-1765 .dropdown-menu .dropdown-menu {
left: -100%;
right: auto;
margin-left: 0;
margin-right: -1px;
.border-radius(6px 0 6px 6px);
}


#24 OBourgeois

OBourgeois

    Advanced Member

  • Members

  • 69 posts
  • LocationLausanne
  • Framework Version:1.1.8 2.1.5
  • Country: Country Flag

Posted 07 October 2013 - 07:22 AM

works fine

 

thanks a lot



#25 OBourgeois

OBourgeois

    Advanced Member

  • Members

  • 69 posts
  • LocationLausanne
  • Framework Version:1.1.8 2.1.5
  • Country: Country Flag

Posted 11 October 2013 - 11:54 AM

Hi

 

you said for the width of the sub menu:

 

left: -100%;
right: auto;

 

this make a little bug when the content width of the menu change ... by example you add a new entry that is larger

 

we replace by:

 

left: auto;
right: 100%;

 

This seems better, can you confirm that for us? 

 

Best regards



#26 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 October 2013 - 11:59 AM

If auto works better, use that instead.





Also tagged with one or more of these keywords: navbar, menu