Basically my issue is that I'm trying to pull this to the right of the page and have no idea how this would be done;
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
! - This is the one that i need aligned to the right - !
<li role="presentation">Admin Panel</li>
</ul>
This is the sub-menu under the navigation bar I use the default bootstrap CSS.
Add the class "pull-right" i'm making a fiddle for you.
https://jsfiddle.net/7Lwa0mky/
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
<!--This is the one that i need aligned to the right -->
<li role="presentation" class="pull-right">Admin Panel</li>
Have you actually tried
<li role="presentation pull-right">Admin Panel</li>
:P
Related
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 want to do custom nav walker
if it has any submenu remove a tag from list item for example below galleries item
I tried to leave empty link . but it did not work. 'a href="#"> completely must remove from galleries item
I share at least 10 forums and groups. I could not find the solution
i really appreciate it your answers
<ul id="menu-mainmenu" class="top-menu"><li class=" normal-menu"><span>HOME</span></li>
<li class=" menu-item-has-children "><span class="title"><a href="http://www.event282.com/?page_id=65"><span>GALERRIES</span></span></i>
<ul class="sub-menu">
<li><span>GALLERY1</span></li>
<li><span>GALLERY2</span></li>
<li><span>GALLERY3</span></li>
</ul></li>
<li class="normal-menu"><span>BIO</span></li>
<li class=" normal-menu"><span>CONTACT</span></li>
</ul>
$(function() {
if($('li').hasClass(' menu-item-has-children ')) { $(this).find('span.title a').removeAttr("href"); }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="menu-mainmenu" class="top-menu"><li class=" normal-menu"><span>HOME</span></li>
<li class=" menu-item-has-children "><span class="title"><a href="http://www.event282.com/?page_id=65"><span>GALERRIES</span></span></i>
<ul class="sub-menu">
<li><span>GALLERY1</span></li>
<li><span>GALLERY2</span></li>
<li><span>GALLERY3</span></li>
</ul></li>
<li class="normal-menu"><span>BIO</span></li>
<li class=" normal-menu"><span>CONTACT</span></li>
</ul>
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>
In Bootstrap, with <ul class="nav nav-tabs">, one gets tabs with the bottom line extending nicely to the right, e.g.,
The tabs are moved to the right with either <ul class="nav nav-tabs navbar-right"> or <ul class="nav nav-tabs pull-right">, the bottom line does not extend to the left, e.g.,
How to fix this?
You can add classes to your li's as such:
CodePen Here
<ul class="nav nav-tabs">
<li class="pull-right">Item 1</li>
<li class="active pull-right">Item 2</li>
<li class="pull-right">Item 3</li>
</ul>
Im using the ZURB Foundation Topbar, I like it apart from a bug I've found. On 2nd level drop downs, if you highlight then click on the link (li elements) just before it takes you to the page you clicked on, the active highlight flicks to one of the above elements and back.
---[The reason its flicking to one of the above elements, is due to it being the 1st level dropdown to be selected, for some reason it flicks to the previous level drop down then back the the 2nd level choice]---Still No idea to fix it though.
<!-- Nav Section Mobile-->
<div class="top-bar-container hide-for-large-up">
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Nav Section -->
<ul class="">
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">pages
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html" >page</a></li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">More
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
</div>
In Foundation 4 there is a bug because of a pseudo class being used with a colon :. It should be a period . after the li:
.top-bar-section ul li:hover > a {
It should read:
.top-bar-section ul li.hover > a {
That'll fix it right up