I need help creating a custom WordPress menu. WordPress Adds its own classes that I don't need. I need someone to help me solve this issue. WordPress doesn't add some attributes when I need them on drop-down.
Here is my HTML code.
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active ">Home</li>
<li class=" dropdown">
About
<ul class="dropdown-menu" role="menu">
<li>Company Profile</li>
<li>Board of directors</li>
<li>Owner's message</li>
<li>team</li>
</ul>
</li>
<li>
projects
</li>
<li class=" dropdown">
Media
<ul class="dropdown-menu" role="menu">
<li>Gallery</li>
<li>documents</li>
</ul>
</li>
<li class=" dropdown">
news
</li>
<li class=" dropdown">
contact
<ul class="dropdown-menu" role="menu">
<li>Conact us</li>
<li>Careers</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
What you are looking for is the Walker class in WordPress. It's built in and can help you create custom navigation amongst other things.
You can read more about it here: https://codex.wordpress.org/Class_Reference/Walker
Related
I am building a WordPress theme with two pages (home & contact) but when I click on the contact, it doesn't show me the page... Maybe there is a problem in my path defining how can I give it a right path
<li>
CONTACT
</li>
<nav class="topnavbar navbar-default topnav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed toggle-costume" data-toggle="collapse" data-target="#upmenu" aria-expanded="false">
<span class="sr-only"> Toggle navigaion</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#"><img src="<?php bloginfo('template_directory');?>/image/logo1.png" alt="logo"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="upmenu">
<ul class="nav navbar-nav" id="navbarontop">
<li class="active">HOME </li>
<li class="dropdown">
CATEGORIES <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>Sport</li>
<li>Old</li>
<li>New</li>
</ul>
</li>
<li class="dropdown">
DEALERS <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
CONTACT
</li>
<button><span class="postnewcar">POST NEW CAR</span></button>
</ul>
</div>
</nav>
</div>
I have a problem with dropdown bootstrap menu in joomla. It looks like it's expaneded all the time. I've already overwritten a mod_menu, so < li > have a class = "nav-item" and I think it can be cause of this problem. Maybe someone had a simillar problem, and know how to solve this. enter image description here
The red element's should be visible only when i focus the 'dropdown menu', but they are visible all the time.
There is a html of the menu (Sorry for the style of code)
<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item">Main</li><li class="item-107 deeper parent nav-item">Dropdown menu<ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item">First
</li><li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
Edit: I forgot about fourth element in the menu, dont worry about this.
I would like to achieve something like 'hover me' on this page:
https://www.w3schools.com/howto/howto_css_dropdown.asp
the example in the link ( W3School ) is done with only css, but you html has bootstrap classes
so to make the dropdown work you need bootstrap's .js and
here's a working fiddle : https://jsfiddle.net/69hev2g4/23/
basically you needed an id for the second ul and add data-target and dropdown-collapse to the link before , and the class collapse for it to be hidden at first,
<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav " id="nav" >
<li class="item-106 nav-item">Main</li>
<li class="item-107 deeper parent nav-item" style="width:284px;">Dropdown menu
<ul class="nav navbar-nav collapse"id="dropdown">
<li class="item-108 nav-item">First</li>
<li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
you can use this tool to see the differences in code : https://www.diffchecker.com/
I have the following bootstrap navbar. I want to include nav.php into all of my php pages. Well I have done simple includes in the past but with div tags something tells me I am doing this wrong.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" alt=" "></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include 'nav.php';?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My nav.php is as following
echo'
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>TEAM</li>
<li class="dropdown">
SERVICES <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>IT SERVICES</li>
<li>VOICE SERVICES</li>
</li>
</ul>
</li>
<li>CAREERS</li>
<li>INTERESTING INFORMATION</li>
<li>CONTACT</li>
</ul>';
Two possible paths:
Add <?php tag to your nav.php file,
or
remove echo statement and make the file plain HTML.
A drop-down menu I created with Twitter Bootstrap works on HTML documents but will not drop down on PHP documents. Here is a PHP document where you can see see what I mean. When I click the "more" tab, it does not drop down.
Why doesn't this menu work on both HTML and PHP documents?
Here is the page source:
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href"" class="navbar-brand">Colorful Cards</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">Past Cards</li>
<li class="active">Contact</li>
<li class="dropdown">
More<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="inverse-dropdown">Bibliography</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">About</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">Coming Soon...</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Ok, im making a website and i really want to have a navbar with a drop down.
So it will be like | BRAND - Link Link Link.
When you click BRAND it will drop a dropdown that will have links, similar to just a link dropdown.
<html>
<style>
.navbar .divider-vertical{
height:50px;
border-left: 1px solid rgb(242, 242, 242); /*Feel free to change left color or width!*/
border-right: 1px solid rgb(255, 255, 255);/*Feel free to change right color or width!*/
}
.navbar-brand {
margin-left: 150px; /* This value could be different for another layout */
}
#brand-Dropdown {
margin-left: 150px;
top: 48px;
}
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gippix Servers <b class="caret"></b>
<ul id = "brand-Dropdown" class="dropdown-menu dropdown-toggle navbar-collapse">
<li>MrBumtart</li>
<li>Xyrize</li>
<li class="divider"></li>
<li>Help</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<a class = "navbar-btn btn btn-info pull-right" href = "/donate"><b>Donate<b></a>
</body>
Ok I found it for you : Code snippet copied from getbootstrap.com and modified by me to implement your idea:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>