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>
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 am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
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>
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.
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