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>
Related
I am trying to implement a main menu (including sub menu) for a website using the BEM CSS naming convention. I have found myself nesting elements which I think is an antipattern of the convention?
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group__list">
<li class="nav__group__item">
<a class="nav__group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
It's always though to nest deep. You can not have Element of Element in the BEM methodology. So this nav__group__list is not correct, could be nav__group-list for example.
The correct BEM markup could look something like this.
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group-list">
<li class="nav__group-item">
<a class="nav__group-link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
However you can separate the "Group list", especially if it can be reused elsewhere in your project.
Your menu with separated links-group Block would look something like this:
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="links-group">
<h3 class="links-group__heading">Nav group</h3>
<ul class="links-group__list">
<li class="links-group__item">
<a class="links-group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
I've been there and I know what you're trying to do - avoid styling by nesting for every price. Believe me it's not the way. Try to keep it simple, don't be afraid of making elements intended to be nested inside the other but don't use second-level nesting in your naming to avoid "really__long__class__names" and renaming everything in case you want to change the HTML structure. Think of BEM as a method of isolating components, breaking a complex UI into simple chunks easy to understand and maintain. In you specific case I'd probably go with something like this:
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav--submenu">
<div class="nav__group">
<h3 class="nav__header">Nav group</h3>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
Than I'd add a different styling for elements nested inside .nav--submenu. What you do want to avoid is cross-nesting between blocks, but inside them go with whatever feels right and if the block is getting too complex, think of extracting it's part to a new one.
All day I'm struggling to create a custom menu walker which will fit the markup that must be on the frontend.
Here is the desired markup:
<nav class="menu cf">
<div class="menu__inner cf">
<ul class="menu__list">
<li class="menu__item menu__item--first">
Menu item 1
</li>
<li class="menu__item menu__item--has_children cf">
<a href="" class="menu__link">
Menu item 2
</a>
<a href="" class="menu__link--toggle">
<i class="icon-arrow-thin-down"></i>
</a>
<div class="sub_menu__wrap">
<div class="container">
<div class="gr-12 gr-3#lg">
<div class="sub_menu__heading">Menu heading (parent menu title)</div>
</div>
<div class="gr-12 gr-9#lg">
<ul class="sub_menu">
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 1
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 2
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 3
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 4
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 5
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu__item menu__item--last">
Menu item 3
</li>
</ul>
</div>
I have some examples of custom class that extends Walker_Nav_Menu
but I think those examples are no good.
Here is what I have so far: http://pastebin.com/qnPx9J67
IMPORTANT! I want to have BEM methodology on my classes, as like:
$menuListClass = 'menu__list';
$menuItemClass = 'menu__item';
$menuLinkClass = 'menu__link';
$subMenuClass = 'sub_menu';
$subMenuClass = 'sub_menu';
$submenuItemClass = 'sub_menu__item';
$subMenuLinkClass = 'sub_menu__link';
I also want to keep some default Wordpress classes, but in this format:
Examples:
.menu-item-has-children -> .menu__item--has_children
.current-menu__item -> .menu__item--current
I'm hoping someone could help me out with this since I don't know very good PHP. :)
Source link: https://developer.wordpress.org/reference/classes/walker_nav_menu/
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>
I am using Foundation 5 (latest, as of time of writing: v5.5.3)
I have set up top-bar menu with some icons for each element.
Basically: top-bar menu works fine unless page width
is more than [640px] and less than [828px]!
I created a screenshot to better illustrate the problem:
screenshot of broken top-bar menu
I prepared a Fiddle illustrating my problem.
(https://jsfiddle.net/sLk0jf4L/146/)
Top-Bar HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Additional CSS to position icons
span.menu-item
{
font-size:1.25rem;
font-weight:500;
line-height:1.25rem;
}
a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
position:relative;
top:0.1rem;
}
a.link-item-about span.menu-item
{
position:relative;
top:0.15rem;
}
a.link-item-flag span.menu-item
{
position:relative;
top:0.2rem;
}
What CSS rules I need to apply to remove this breakage?
It would be fine if menu just showed up as hamburger
icon instead of braking up.
Thank you for your time and knowledge.
I've made a slight modification to your html in that I've added a span around the "Choose language" text with a class of .lang-text so I can manipulate the content using #media queries.
The idea is that when the viewport size reaches the breaking point, only the "Choose language" text is hidden, retaining the flag icon (and the dropdown options with it).
Html:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
#media queries:
#media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
#media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
Updated Fiddle
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