I have a navbar from bootstrap3.3. I also have various forms on this page which redirects with header location when a form is submitted. Whenever I add any sort of additional form or dropdown to my navbar(as opposed to the page body), the header location stops redirecting (the query still runs in the db as normal).
They should be completely independant of each other so I'm confused if this is a bug with bs 3.3? Or is my code flawed/have I made a stupid mistake?
form query works perfectly, but header location only if my navbar is relatively simple..
$result = $this->db_query($query);
if($result){
header("Location: https://somepage.com?message=submitted");
}
still works with this:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://somepage.com">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Order</li>
<li>Collections</li>
<li>Summary</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
but won't work with this (tried form search and dropdown separately and together)
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://somepage.com">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Filter<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><form class="form-inline" method="POST" action="">
<div class="form-group">
<input type="text" class="form-control" id="search" name="search" placeholder="Search">
</div>
<button type="submit" name="search" class="btn btn-secondary mb-2">Search</button>
</form></li>
<li>Order</li>
<li>Collections</li>
<li>Summary</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Related
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 just started learning PHP. I have this form that I have set the action to "dashboard.php". But, when I click the submit button, it send the user and variables to a file called newaccount.php. I don't know why this is happening and I have looked over my code. Any suggestions on how I can fix this problem?
Note: The HTML file is called newaccount.html, if that has anything to do with the problem.
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"> Know Music</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li>Guitar</li>
<li>Bass</li>
<li>Drums</li>
<li>Piano</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span></a>
<ul class="dropdown-menu">
<li>Log In</li>
<li>Create New Account</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
<ul class="dropdown-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div id="buffer">
</div>
<div id="text">
<h8>Create A New Account</h8>
</div>
<div class="form">
<form action="php/dashboard.php" method="post">
<input type="text" class="w3-round-large in" name="email" value="E-Mail"><br>
<br>
<input type="password" class="w3-round-large in" name="wsp" value="Password"><br>
<br>
<input type="submit" class="submit w3-round-large" value="Register">
</form>
</div>
<div class="log">
<p>Already have an account? <a class="link" href="#">Log In Here!</a></p>
</div>
</div>
</body>
PHP (dashboard.php):
<html>
<body>
<?php
$user = $_POST["username"];
$pass = $_POST["wsp"];
echo $user;
echo $pass;
?>
</body>
</html>
How to make some menu tab option is invisible if user is not Admin, eg: if ['user_level']>=5
<a class="navbar-brand" href="#">CBS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">DTC</li>
<li>View Proposal</li>
<li>Users details</li>
</ul>
<ul class="nav navbar-nav navbar-right">
I want to make only home.php menu tap visible to user only. Admin can see all the menu tab.
eg screen shot
Server side in php you can conditionally echo the related element.
Assuming you user auth is assigned to $userAuth var you can eg:
<a class="navbar-brand" href="#">CBS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<?php if ( $userAuth == 'Admin' ) {
echo '<li class="active">DTC</li>';
}
?>
<li>View Proposal</li>
<li>Users details</li>
</ul>
<ul class="nav navbar-nav navbar-right">
You can do with 2 methods:
1) You have to give class hidden like this:
<style type="text/css">
.hidden {
display: none;
}
</style>
<?php
if ($user_level>=5) {
$hide = "hidden";
} else {
$hide = "";
}
?>
<a class="navbar-brand" href="#">CBS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active <?=$hide?>">DTC</li>
<li class="<?=$hide?>">View Proposal</li>
<li class="<?=$hide?>">Users details</li>
</ul>
<ul class="nav navbar-nav navbar-right">
2) if else condition:
<a class="navbar-brand" href="#">CBS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<?php if ($user_level>=5) { ?>
<li class="active">DTC</li>
<?php } else { ?>
<li class="active">DTC</li>
<li>View Proposal</li>
<li>Users details</li>
<?php } ?>
</ul>
<ul class="nav navbar-nav navbar-right">
Don't duplicate code - it is first rule. So better is to wrote:
(i persume that ['user_level'] is some value in array(); - here I call this array $user:
<a class="navbar-brand" href="#">CBS</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--first of all check if you get $user values-->
<?php if (isset($user)): ?>
<!-- display common elements for ALL USERS -->
<li class="active">DTC</li>
<!-- elements only for admins - users with level greater then 5-->
<?php if ($user['user_level'] >= 5): ?>
<li>View Proposal</li>
<li>Users details</li>
<?php endif; ?>
<?php endif; ?>
</ul>
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
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>