i'm trying to do something like this: http://cssdeck.com/labs/3fo47n21 in wordpress, but i'm having trouble to get the navigation to wrap menu li with anchor tags like this:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>Accueil</li>
</a>
<a href="#" class="menu-link">
<li>Portfolio</li>
</a>
<a href="#" class="menu-link">
<li>Themes</li>
</a>
<a href="#" class="menu-link">
<li>Templates</li>
</a>
<a href="#" class="menu-link">
<li>Contact</li>
</a>
</ul>
</nav>
All i got is this in the header:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav id="nav-main" class="menu clearfix" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'menu-inner', 'items_wrap' => '<ul id="%1$s" class="%2$s"><a class="menu-link">%3$s</a></ul>'));
endif;
?>
</nav>
You guys are my last resort, any advice?
Does this help?
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<li>Accueil</li>
<li>Portfolio</li>
<li>Themes</li>
<li>Templates</li>
<li>Contact</li>
</ul>
</nav>
If you are going to use <a> elements in a <ul> element, you need to wrap in in an <li> element. You should actually wrap anything in a <ul> element with an <li> element.
Related
I have a sidebar in my cPanel, And this sidebar has a menu toggle.
for example ==>
When clicking on the 'Account setting' there are some links or options under it.
And this is my code
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
Note : I'm working in Angular 14
I copied this code from somewhere else and don't know what to link on it are as all option are being shown in menu bar but the only problem is link aren't opening.
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="mr-auto">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active">
Home
</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Our Teachers</li>
<li>Our School</li>
</ul>
</li>
<li>
Admissions
</li>
<li>
Courses
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
<div class="ml-auto">
<div class="social-wrap">
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black"><span
class="icon-menu h3"></span></a>
</div>
</div>
</div>
</div>
</div>
</header>
Do you have the files with the name about.html, admissions.html, courses.html, contact.html?
Just make sure you have created the files within the same directory
I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li>About</li>
<li>Services</li>
<li>Work</li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>About
<ul>
<li>About Company</li>
<li>Designers</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Development</li>
<li>Apps</li>
<li>Graphic design</li>
<li>Branding</li>
</ul>
</li>
<li>Work
<ul>
<li>Web</li>
<li>Graphic</li>
<li>Apps</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: mario-loncarek.from.hr
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!
Just a heads up, I ran into this issue because I unknowingly had included the SLIM build which apparently jettisons pretty animations such as fadeToggle.
i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>
I have already tried to do research to fix this problem but no fixes were working! I am using a Bootstrap 3 navigation for my site and it works great on desktop. However, in the mobile menu, I click on an item, expecting the sub nav to appear, and the whole menu closes instead - after first flashing the text of the sub nav for a millisecond. How can I fix this??
Thanks
Edit: here is my navbar setup
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://totango2015.staging.wpengine.com/">
<img src="http://totango2015.staging.wpengine.com/wp-content/themes/totango/assets/img/global/totango_logo.png" class="top-logo" />
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-product">product</li>
<li class="menu-customers">customers</li>
<li class="dropdown menu-resources"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-customer-success-resources">customer success resources</li>
<li class="menu-events-webinars">events & webinars</li>
<li class="menu-totango-support">totango support</li>
</ul>
</li>
<li class="menu-blog">blog</li>
<li class="dropdown menu-company"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-about-us">about us</li>
<li class="menu-news">news</li>
<li class="menu-careers">careers</li>
<li class="menu-contact-us">contact us</li>
</ul>
</li>
<li class="menu-login">login</li>
</ul> </div>
<!-- /.navbar-collapse -->
<hr class="nav-rule">
</div>
<!-- /.container -->
</nav>