I have made a login system and I am trying to add a dropdown to the username for settings. However, I can make it look like it has a dropdown but no menus appear.
<?php else:?>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">A09hopper.xyz</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if(!empty($_SESSION['username'])):?>
<li class="dropdown">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"> </span><?php echo $_SESSION['username'];?><span class="caret"></span></a></li>
<ul class="dropdown-menu">
<li>1-1</li>
<li>1-2</li>
</ul>
</li>
<?php else:?>
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<?php endif;?>
</ul>
</div>
</nav>
<?php endif; ?>
I have tried everything I can think of but to no avail.
I have just fixed my issue. The code below is the fix.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">A09hopper.xyz</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if(!empty($_SESSION['username'])):?>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"> </span><?php echo $_SESSION['username'];?> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<?php else:?>
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<?php endif;?>
</ul>
</div>
</nav>
Related
Hi I am trying to get a dropdown list to appear when you click a button, problem is that whenever I click the button it goes to the index page instead of showing the list.
However, the button works only on one specific page which is almost identical to the others.
Here is the code:
<li class="dropdown">
<a id="dLabel" data-target="#" href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
Please use javascript:void(0) instead of blank.
<li class="dropdown">
<a id="dLabel" data-target="#" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
I'm in the process on covering the navigation bar on all the pages to a global navigation with the PHP. I'm using PHP also to add a class and show the current page.
The challenge that I'm facing is the parent navigation selection. It's underlined when it's on the child page and the sub-nav is also selected. Such as I'm on the "History" page, child page to the "About Us" page. Both are underlined.
The challenge that I'm facing is when I move over to the next page, "Service Areas" or any of it's children, the "About Us" nav selection is still underline. I'm trying to use the || logic to prevent that from happening.
Below is the following code:
<li class="dropdown <?php if ($thisPage=='About Us'||'History'||'Mission Values'||'Process'||'Our People'||'Testimonials'||'Capstone Cares') echo 'active'; ?>">
Is there a way that I can deselect the parent nav when I'm under a different nav section?
Website is http://capstone.dgpehrson.com
Here is the rest of the code...
On individual pages I'm adding:
<?php $thisPage="About Us"; ?>
I'm changing the name according to the page.
Here is the Navigation code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown <?php if ($thisPage=='About Us' || 'History' || 'Mission Values' || 'Process' || 'Our People' || 'Testimonials' || 'Capstone Cares') echo 'active'; ?>">
About Us<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="History") echo "class=\"active\""; ?>>History</li>
<li <?php if ($thisPage=="Mission Values") echo "class=\"active\""; ?>>Mission & Values</li>
<li <?php if ($thisPage=="Process") echo "class=\"active\""; ?>>Process</li>
<li <?php if ($thisPage=="Our People") echo "class=\"active\""; ?>>Our People</li>
<li <?php if ($thisPage=="Testimonials") echo "class=\"active\""; ?>>Testimonials</li>
<li <?php if ($thisPage=="Capstone Cares") echo "class=\"active\""; ?>>Capstone Cares</li>
</ul>
</li>
<li class="dropdown <?php if ($thisPage=='Service Areas'||'Apartments'||'Capital'||'Development Services'||'Manufactured Housing'||'Complimentary') echo 'active'; ?>">
Service Areas<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="Apartments") echo "class=\"active\""; ?>>Apartments</li>
<li <?php if ($thisPage=="Capital") echo "class=\"active\""; ?>>Capital</li>
<li <?php if ($thisPage=="Development Services") echo "class=\"active\""; ?>>Developement Services</li>
<li <?php if ($thisPage=="Manufactured Housing") echo "class=\"active\""; ?>>Manufactured Housing</li>
<li <?php if ($thisPage=="Complimentary") echo "class=\"active\""; ?>>Complimentary Value Analysis</li>
</ul>
</li>
<li class="dropdown">
Offerings<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Apartment</li>
<li>Manufactured Housing</li>
<li>Multi-family Land</li>
</ul>
</li>
<li class="dropdown">
Market Reports<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Florida</li>
<li>Kentucky</li>
<li>North Carolina</li>
<li>South Carolina</li>
<li>Tennessee</li>
<li>Virginia</li>
</ul>
</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
You have to have the compare between each 'or'. The string is just evaluating to a true.
if ($thisPage=='About Us'||$thisPage=='History'||$thisPage=='Mission Values'||$thisPage=='Process'||$thisPage=='Our People'||$thisPage=='Testimonials'||$thisPage=='Capstone Cares') echo 'active';
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!
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>
I'm trying to build a basic header drop down nav for my three user account types, but they have different options depending on the account type. My code is throwing errors. Code is as follows:
<div class="btn-group pull-right">
<?php if ($this->logged_in):
$is_a = ($this->logged_in_usertype == App_Model_Users::TYPE_A);
$is_b = ($this->logged_in_usertype == App_Model_Users::TYPE_B);
$is_c = ($this->logged_in_usertype == App_Model_Users::TYPE_C);
?>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> <?php echo $this->logged_in_nickname;?>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php if ($is_b):?>
<li>Page Option One</li>
<li class="divider"></li>
<li>Page Option Two</li>
<li class="divider"></li>
<li>Page Option 3</li>
<li class="divider"></li>
<li>Page Option 4</li>
<li class="divider"></li>
<?php if ($is_a):?>
<li>Account-type 2 Profile</li>
<?php endif;?>
<?php endif;?>
<li>Account Settings</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
<?php else:?>
<a class="btn" href="/login">
<i class="icon-user"></i> Register / Login
</a>
<?php endif;?>
</div>
I think my problem is the 2nd if statement for (if is_a)... but I'm not sure - I'm rather new to php. Could someone please help me with the correct way to construct this if statement w/ as little changes as possible to the code?
Can you post the actual error here, to inspect.
and you have a syntax error on line 32
<?php else:?>
And the second if is inside the fist if statment