I am trying to convert HTML to Wordpress and I am having troubles with menus.
The menu is a 3 level drop-down menu, I am outputting it with wp_nav_menu and this is how it formats.
<ul id="nav" class="sf-menu">
<li>Home</li>
<li>Blog</li>
<ul class="sub-menu">
<li>Level 2</li>
<ul class="sub-menu">
<li>Level 3</li>
</ul>
</ul>
<li>Portfolio</li>
<li>Contacts</li>
</ul>
Basically I want to remove the "sub-menu" class from the /s in the 2nd level and 3rd level.
This is how I want it to be:
<ul id="nav" class="sf-menu">
<li>Home</li>
<li>Blog</li>
<ul>
<li>Level 2</li>
<ul>
<li>Level 3</li>
</ul>
</ul>
<li>Portfolio</li>
<li>Contacts</li>
</ul>
Is this possible to do with a custom walker class?
There is a wordpress 'setting' fkr that:
As you can see:Function Reference/wp nav menu
you can remove the ul by writing this when you call the wp_nav_menu:
<?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
this should work. you also have some other Parameters for the nav menu: it's id, container_class and more.
you can use below code :
$(function() {
$('.sf-menu ul').removeClass('sub-menu');
});
Related
I am using MaterializeCSS's extended navbar with tabs to display content on my static website. I copied and pasted the example code into my project files, and while it seemed to work fine initially on my screen, when I began resizing it, I noticed that some of the tab names would get cut off, and the scrollbar that the documentation says should appear when this happens does not display on my end.
<header>
<nav class="nav-extended navColor" role="navigation">
<div class="nav-wrapper">
BRAND
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs navColor">
<li class="tab"><a class = "active" href="#all">All</a></li>
<li class="tab">Really Long Name 1</li>
<li class="tab">Really Long Name 2</li>
<li class="tab">Really Long Name 3</li>
<li class="tab">Really Long Name 4</li>
<li class="tab">Really Long Name 5</li>
<li class="tab">Really Long Name 6</li>
<li class="tab">Really Long Name 7</li>
<li class="tab">Really Long Name 8</li>
<li class="tab">Really Long Name 9</li>
</ul>
</div>
</nav>
<ul class="sidenav navColor" id="mobile-menu">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</header>
codepen with materializecss and js: https://codepen.io/khw889ajv/pen/JjpvjEN
materialize tabs: https://materializecss.com/tabs.html
materialize navbar: https://materializecss.com/navbar.html
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
I am using a Bootbusiness theme in my Twitter Bootstrap website, and I am trying to create the stacked tab navigaton, as seen in the documentation of Bootstrap but whenever I try do it only appears as a List without style. And not styled as stacked button.
Here is my code in the HTML
<div >
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
You need to have an anchor inside li to get the styles
Fiddle
<div>
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item </li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Is it possible to target only the "Pulldown Parent Menu" link below in CSS (I can't modify the code below)?
The line of code I wish to target so that I can modify it in CSS is:
<li class="page_item page-item-8">Pulldown Menu Parent
The page-item-8 class is dynamically generated so I can't rely on it.
The full code is:
<div id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-19">Contact</li>
<li class="page_item page-item-8">Pulldown Menu Parent
<ul class='children'>
<li class="page_item page-item-9">Test Page 2</li>
<li class="page_item page-item-11">Test Page 3</li>
<li class="page_item page-item-13">Test Page 4</li>
<li class="page_item page-item-15">Test Page 5</li>
<li class="page_item page-item-17">Test Page 6</li>
</ul>
</li>
</ul>
</div>
</div><!-- #access -->
How can I access the Pulldown Menu Parent link above in CSS?
At your Appearance > Menus, you can click Screen Options and click CSS Classes to add specific class for a specific menu item.
Click here for full image view