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>
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>
So I get that that is a silly beginner question, but I can't figure it out. Its two parts:
THE SETUP
So I want to have a universal navbar on my site. I created a navigation.php file and I am using include on every page.
THE PROBLEM
On my index page, it is working great. However all of my other pages are within a contentFiles folder. When I navigate from the index page, back to the index page the contentPages, the sub-directory stays in the URL.
To see exactly what it is doing:
1. Go to http://www.newshongumpto.org
2. Click on News/Calendar > Calendar
3. Click on Home
Any suggestions? My next questions is how to make this dynamic from my dB, but I think I will attempt that first before coming back.
<nav class="navbar navbar-default navbar-fixed-top navbar-left" role="navigation">
<div class="nav-container container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-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>
<img src="/images/ShongumSkyhawkBird_Green_Brand.png" alt="Shongum Elementary School" class="skyhawk_navimage" width="45" height="56"></div>
<div class="collapse navbar-collapse" id="bs3-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown"> Membership <b class="caret"></b>
<ul class="dropdown-menu">
<li>Benefits of Membership</li>
<li class="divider"></li>
<li>Parent Membership Application</li>
<li>Teacher Membership Application</li>
</ul>
</li>
<li class="dropdown"> Programs <b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved!</li>
<li class="divider"></li>
<li>Family Portraits</li>
<li>Room Parents</li>
<li>Skyhawk Enrichment</li>
</ul>
</li>
<li class="dropdown"> Classes <b class="caret"></b>
<ul class="dropdown-menu">
<li>Kindergarden</li>
<li>1st Grade</li>
<li>2nd Grade</li>
<li>3rd Grade</li>
<li>4th Grade</li>
<li>5th Grade</li>
</ul>
</li>
<li>Store</li>
<li class="dropdown"> News/Calendar <b class="caret"></b>
<ul class="dropdown-menu">
<li>News</li>
<li>Calendar</li>
</ul>
</li>
<li class="dropdown"> RSD<b class="caret"></b>
<ul class="dropdown-menu">
<li>RAM Alerts</li>
<li>District Calendar</li>
<li>Lunch Menu (Shongum Only)</li>
</ul>
</li>
<li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="749L2346K28NW">
<input type="submit" value="Donate Now ยป" name="submit" title="Donate to your Shongum PTO Today!" class="paypal_btn">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form> </li>
</ul>
<a class="btn btn-default navbar-btn" href="../contentPages/membership/membership.php">Membership Sign-Up</button>
</a> </div>
</div>
</nav>
Change href="index.php" to href="/index.php"
Similarly add slash to all your urls . This way, all your urls will be routed from your website's base url
Relative links did the tricks... duh... (ugh)...
I am making a mobile responsive site with Bootstrap 3.3.4.
I will be making it with server side includes when I can get the web.config file written up since I am using an IIS server.
This is what the nav bar looks like with just the bar. This is what I want it to look like.
Does Bootstrap not like PHP?
http://hurricanetracking.us/nav.html
Other elements on the page.
http://hurricanetracking.us/new.php
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hurricane Tracking</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Category Information</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Current
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ana</li>
<!--<li>Bill</li>
<!--<li>Claudette</li>
<!--<li>Danny</li>
<!--<li>Erika</li>
<!--<li>Fred</li>-->
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Historical
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ana</li>
<!--<li>Bill</li>
<!--<li>Claudette</li>
<!--<li>Danny</li>
<!--<li>Erika</li>
<!--<li>Fred</li>-->
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Remove this from index.css
.navbar{
background-color:#039;
width:120px;
position:fixed;
left: 0px;
top: 0px;
float:left;
}
that is what is messing it up!
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
I'm using php (mamp stack) and bootstrap.
I have bootstrap.js, bootstrap.css, my index.php file all in the same folder.
Yet the bootstrap styling of the navbar is not functioning. Don't know why this is happening. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Summit</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
</head>
<body>
<h1>Summit</h1>
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<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 -->
</nav>
</body>
</html>
"I have bootstrap.js, bootstrap.css, my index.php file all in the same folder."
In that case change these lines;
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
to
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"></script>