which it is the best way to naming a dropdown menu with bem ?? use children nav-main__sub or modifier nav-main--sub ??
<ul class="nav nav-main">
<li class="nav__item">
home
</li>
<li class="nav__item nav__item--sub-nav">
About
<ul class="nav nav-main--sub">
<li class="nav-main--sub__item">
Company
</li>
</ul>
<li class="nav__item">
Contact
</li>
IMHO nav-main__sub, because it is not modifier.
<ul class="nav nav--main">
<li class="nav__item nav__item--sub-nav">
About
<ul class="nav nav-main__sub">
<li class="nav-main__sub-item">
Company
</li>
</ul>
</li>
</ul>
or easier:
<ul class="nav nav--main">
<li class="nav__item nav__item--sub-nav">
About
<ul class="sub">
<li class="sub__item">
Company
</li>
</ul>
</li>
</ul>
Related
Using an example of W3Schools at the following :W3Schools DropDown
I have followed the example but it is not working for me. Here's where I want it:
#Styles.Render("~/Content/bootstrap.min.css")
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" #Html.ActionLink("Our Church", "Index", "Home")</a>
</div>
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>MTB Link 1</li>
<li>MTB Link 2</li>
<li>MTB Link 3</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>MTB Link 4</li>
<li>MTB Link 5</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#Html.Partial("_LoginPartial")
</ul>
</div>
</nav>
</header>
I honestly don't understand why this isn't working. My css file contains the correct code.
I'm migrating a website from Bootstrap 3.7 to Bootstrap 4. In my site, I have a banner across the top that looks like this:
+-----------------------------------------------------------+
| Item 1 Item 2 Item A Item B [note] |
+-----------------------------------------------------------+
The items in the left are dynamic. The items on the right are dynamic. The [note] piece shows occasionally. I had this working correctly with Bootstrap 3.7. However, when migrating to Bootstrap 4, the content is all left aligned. You can see the result in this Bootply. The code looks like this:
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline justify-content-end">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
I don't understand why the items are all left-aligned instead of filling the width of the page. What am I missing?
As explained here float won't work in the navbar since it's now flexbox. Use ml-auto to push the items to the right.
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline ml-auto">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
https://www.codeply.com/go/CGBAvf8r1q
Or, you can use mr-auto on the first nav.
Could you put your [note] item in with your second unordered list and and use justify-content-between in your wrapping div element? It would look something like this...
<nav class="navbar">
<div class="d-inline-flex justify-content-between" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
<li class="list-inline-item">[note]</li>
</ul>
</div>
</nav>
I use this code to logout from dropdownmenu but didn't work
<li>Log off</li>
Here is my Form
<form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
#UserManager.GetUserName(User)! <span class="caret"></span>
<ul class="dropdown-menu">
<li>Gigs I'm Going</li>
<li>Artist I'm Following</li>
<li role="separator" class="divider"></li>
<li>
Log out
</li>
</ul>
</li>
</ul>
</form>
I have a simple topbar menu in html.How can i get it via wordpress ? walker_nav_menu is great,but i don't know how to use it properly as a newbie in wordpress.
<ul class="topbar-list topbar-menu">
<li>Blog</li>
<li>Contact</li>
<li>Forums</li>
<li>
Dropdown
<ul class="topbar-dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signin" href="javascript:void(0);">Login</a></strong></li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signup" href="javascript:void(0);">Register</a></strong></li>
</ul>
How can I display LI.parent side by side?
I'm using Bootstrap 3 and my HTML is:
<ul role="menu" class="dropdown-menu">
<li class="item-001 dropdown parent">
ABC
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-002 dropdown parent">
DEF
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-003 dropdown parent">
GHI
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
</ul>
To have li elements side by side, you simply need to use a left float in your CSS like so:
.dropdown {
float: left;
}