I am trying to make my UI-kit navbar fixed, so it will follow the scroll, but my problem is, that it now is overlapping my Off-canvas (like it has a higher z-index, but it hasn't).
Does anyone know how to achieve that the off-canvas is on top of a navbar with a fixed position (top)?
EDIT #1
<nav id="mobileNav" class="tm-navbar uk-navbar uk-navbar-attached uk-hidden-large">
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle"></a>
1.000,-
<div class="uk-navbar-brand uk-navbar-center"><img src="http://www.mammashop.dk/skin/frontend/default/ic_verticalmom_pink_dk/images/logo.gif" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Navbar documentation: http://getuikit.com/docs/navbar.html
Off-canvas documentation: http://getuikit.com/docs/offcanvas.html
My solution:
<nav class="uk-navbar ">
<a class="uk-navbar-brand uk-hidden-small" href="#">Isaac Udotong</a>
<div class="uk-navbar-content uk-navbar-flip uk-hidden-small">
<div class="uk-button-group">
<ul class="uk-navbar-nav uk-hidden-small">
<li class="">
About
</li>
<li>
News
</li>
<li>
contact
</li>
</ul>
</div>
</div>
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle uk-visible-small"></a>
<div class="uk-navbar-brand uk-visible-small uk-hidden-large uk-hidden-medium">
<img src="" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Please Replace this code from your above code.
Here you can use both off-canvas and fixed navbar in responsive design.
Related
List categories:
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
I removed <li data-value="6379" class="option"></li> List from Wordpress Dashboard and now i get this:
How is displayed
I try to hide that with CSS:
1. ul.list li.option:nth-of-type(5n+0) {display: none !important;}
2. ul.list li.option:nth-child(5) {
display:none;
}
3.ul.list li.option:nth-of-type(1n+4) {display: none;}
How to remove that field from the dropdown?
This works for me, you needed nth-child(6) because its the 6th item!!
ul.list .option:nth-child(6) {
display:none;
}
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
</ul>
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 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>
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}
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>