I need my menu to look like this
link1 link2
link3
link4
link5
link6
Here is my markup
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Link1", "Index", "Link1")</li>
<li>
Link2<b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Link3", "Index", "Link3")</li>
<li>
Link4<b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Link5", "Index", "Link5")</li>
<li>#Html.ActionLink("Link6", "Index", "Link6")</li>
</ul>
</li>
</ul>
</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name</p>
</div>
But this is what I get
Link 4 never expands to show the sub links (link5 & link6)
Any ideas?
Related
I need to be able to add a link to "Home" and "Pages" when clicking it but also to collapse and show the li items from below.
I changed "#homeSubmenu" from a href with a link but when clicking it does not collapse.
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Use data-bs-target for the Collapse and href for the link..
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
My header is separate from my "front-page" and it is pulled to each page using the get_header(); function. This means that the header will be the same on all pages, however, I want to change the font color the something different on the front-page. How can I achieve this result within WordPress?
<head>
<?php wp_head(); ?>
</head>
<section class="navbar custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
Website <span></span>
WBS <span></span>
</div>
<!-- MENU LINKS -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-nav-first">
<li>Product</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Benefits <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
<li>Cat 4</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Collection <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 6<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 4
</li>
<li>Dropdown 5</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 6</li>
<li>Dropdown 7</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
Convert your menu to a WordPress menu by entering it in admin area under Appearance > Menus.
Then display the menu in your template using the wp_nav_menu() function: https://developer.wordpress.org/reference/functions/wp_nav_menu/
WordPress will output your menu with classes that allow you to style the links based on which page you are on, which is active etc.
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 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>
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>