I am trying to get the selected option highlighted using php
my css is as follows
ul.leftmenu {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff;
}
ul.leftmenu li a {
display: block;
color: #2e3e49;
padding: 10px 16px 10px 35px;
text-decoration: none;
border-bottom: 1px solid #cccccc;
}
.current {
color: #00AEEF;
background-color:#ffffff;
}
ul.leftmenu li {
text-align: left;
font-size: 16px;
font-weight: bold;
}
ul.leftmenu li:first-child {
border-top: 1px solid #cccccc;
}
ul.leftmenu li:last-child {
border-bottom: none;
}
ul.leftmenu li a:hover {
background-color: #ffffff;
color: #00aeef;
transition: .35s ease-in-out;
}
p.leftmenu {
font-size: 16px;
font-weight: bold;
margin-left: 25px;
padding: 5px;
}
my html is as follows
<p class="leftmenu"><?php echo "Welcome <br />".$_SESSION['user_name'];?></p>
<ul class="leftmenu">
<li <?php if($current == 'addproperty') {echo 'class="current"';} ?>>Add Property<li>
<li <?php if($current == 'manageproperties') {echo 'class="current"';} ?>>Manage Properties<li>
<li <?php if($current == 'searchproperty') {echo 'class="current"';} ?>>Search Property<li>
<li <?php if($current == 'savedsearch') {echo 'class="current"';} ?>>Saved Search<li>
<li <?php if($current == 'favoriteproperties') {echo 'class="current"';} ?>>Favorite Properties<li>
<li <?php if($current == 'invitefriends') {echo 'class="current"';} ?>>Invite Friends<li>
<li <?php if($current == 'editprofile') {echo 'class="current"';} ?>>Edit Profile<li>
</ul>
and on each php page i have defined
$current = 'addproperty'; (changed as per page)
Now the problem is that the .current is able to change the background color but not the color.
Try this ..
ul.leftmenu li.current a {
color: #00AEEF;
background-color:#ffffff;
}
Related
I've got a problem : when i try to move the cursor of the mouse on the sub-menu of the drop down, for some motive it disappier.
I try to check in file css end in its file js but at the third day again i didn't find the solutions..i think that could be some problem with [block] in class css. does someone see if there something that wrong end eventually how could operate to resolve this problem? under here post an image with the code.
Thank in advance.
Here another image...maybe understanding better:
here the code about the top-link :
/* ======================================================================================= */
--> .top-link { background: #f7f7f7;line-height: 35px; position: relative;color: #6a6a6a; border-bottom: 1px solid #d8d8d8;}
.form-language, .form-currency { float: left;}
.form-language label { display: none;}
.form-language select, .form-currency select { padding: 4px 10px; background: #f2f2f2;}
p.welcome-msg { margin: 0 0 0 25px; float:left; padding: 5px 0;}
.top-link ul.links { padding: 5px 0;}
.top-link ul.links li { padding:0 15px 0 0; float: left;}
.top-link ul.links li a { color: #6a6a6a;font-size: 11px;text-transform: uppercase; }
.top-link ul.links li a:hover { }
.call-phone{text-align: right;}
.call-phone span{color:#999;font-weight: bold;}
here the code about bottom Drop down :
.drop-lang {
list-style: none;
padding: 0;
margin: 0;float: right;
}
.drop-lang .drop-trigger {
position: relative;
z-index: 9999;
float: right;
padding: 0 5px 0 10px;
}
.drop-lang li a {
position: relative;
padding: 5px 0 5px 0;
display: block;
color: #6a6a6a;
text-transform:uppercase;
font-weight: normal;
font-size: 11px;
z-index: 9999;
}
.drop-lang .drop-trigger .sub-lang {
position: absolute;
top:40px;
left:-1px; /* dropdown left or right */
list-style: none;
padding:0 11px 0 4px;
margin: 0;
display: none;
background: #f7f7f7;
border: 1px solid #d8d8d8;
border-top: none
z-index: 9999;
}
.drop-lang .drop-trigger:hover .sub-lang {
top:45px;
display: block;
}
.drop-lang .sub-lang li a { padding: 0 5px; line-height: 22px; display: block; color: #666; text-transform:uppercase; font-weight: normal; font-size: 11px; border-top: 1px solid #d8d8d8; border-right:0;border-left:0; border-bottom:0; border-radius:0;}
.drop-lang .sub-lang li a:hover { }
Html/php part :
<?php if(count($this->getStores())>1): ?>
<div class="form-language">
<label for="select-language"><?php echo $this->__('Language:') ?></label>
<ul class="drop-lang">
<li class="drop-trigger">
<?php foreach ($this->getStores() as $_lang): ?>
<?php if($_lang->getId() == $this->getCurrentStoreId()): ?>
<a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"><?php echo $this->htmlEscape($_lang->getName()) ?><i class="fa fa-angle-down"></i></a>
<?php endif?>
<?php endforeach; ?>
<ul class="sub-lang">
<?php foreach ($this->getStores() as $_lang): ?>
<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' class="selected"' : '' ?>
<li><a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"<?php //echo $_selected; ?>><?php echo $this->htmlEscape($_lang->getName()) ?></a></li>
<?php endforeach; ?>
</ul>
</li>
</ul>
</div>
<?php endif; ?>
Try the fiddle at - https://jsfiddle.net/456f2sf7/
.drop-lang .drop-trigger:hover .sub-lang {
top:20px;//Updated value
display: block;
}
Just decreasing the top margin to 20px, ensures that the dropdown does not disappear as it is visible only on hover.
I am just learning web dev. I am using php in my menus. I am doing this so my users information is displayed when the user is logged in, within the menu itself. I do this with the Session super global array variables. For any of the two different kind of users that login, these variables store whether they are logged in and what their name is. This way the menu can react to adding them to the menu. My issue is that it seems that by simply using php drags my horizontal to the next level, or what I have seen people call "stepdown".
I have a jfiddle of the same sort of information running without php.
Without php, no step down:
https://jsfiddle.net/bx1jsnoL/
Stepdown looks like this on my side, which has php code echoing html code:
Here is my php on my side:
<!DOCTYPE html>
<div class="nav">
<ul>
<li>Home </li>
<li>Dates </li>
<li><a><i>Information </i></a>
<ul>
<li>About the conference</li>
<li>Conference Fee</li>
<li>Hotel Information</li>
<li>Conference Registration</li>
<li>Conference Program</li>
<li>Guidelines</li>
<li>Keynote Speakers</li>
<li>Call for Paper</li>
<li>Major Areas</li>
</ul>
</li>
<li>Comments </li>
<?php
session_start();
if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
{
echo "<li><a id='orange'><i><b>Reviewer<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a></li>";
echo "<li><a href='logout.php'> Log out</a></li><li><a href='reviewerregister.php'>Registration</a></li>
<li><a href='submission.php'>Paper</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Reviewers </i></a>
<ul>
<li><a href='login.php'> Log in</a></li>
<li><a href='reviewerregister.php'>Reviewer Registration</a></li>
<li><a href='submission.php'>Paper Submission</a></li>
</ul>
";
}
?>
</li>
<?php
session_start();
if(isset($_SESSION['adminstatus']) && $_SESSION['adminstatus']==true)
{
echo "<li><a id='orange'><i><b>Admin<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['adminname'] . "<b></i></a></li>";
echo "<li><a href='logout.php'>Log out</a></li>
<li><a href='admindbmanagement.php'>Management</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Admin </i></a>
<ul>
<li><a href='adminlogin.php'> Log in</a></li>
</ul>
";
}
?>
</ul>
</div>
Here is my css, it is included in the jfiddle but the editor here won't let me get away without any code:
table, th, td
{
border:1px solid #99d9f4;
color: white;
text-align: center;
}
form, table
{
text-align: center;
margin-left:auto;
margin-right:auto;
}
td
{
padding: 10px;
}
#orange
{
color:orange;
}
th
{
/* background-color:#99d9f4; nothing happens
color:white;*/
}
.enlarge:hover
{
transform:scale(2,2);
transform-origin:0 0;
}
#dates li
{
margin: 10px 0;
}
h1
{
/* text-decoration: underline;
*/ text-transform: capitalize;
text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
color: white;
}
p, h2, h3, h4, h5, h6
{
color:white;
}
* {
font-family: Georgia, serif, Arial;
}
/* this addresses all text
*/
input[type="submit"]
{
background:green;
color: white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="file"]
{
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="reset"]
{
background:red;
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
body
{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
margin: 0;
text-align: center;
}
input
{
color: black;
}
textarea
{
color: black;
}
/* line-height 0 gives some odd text */
.nav ul {
list-style: block;
background-color: black;
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
font-size: 110%;
}
.nav > ul > li {
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/*submenus */
.nav li li {
font-size: .6em;
}
.nav li ul {
display: none;
position: absolute;
width: inherit;
}
ul.menu li
{
display:inline;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav > ul > li > a {
padding-left: 0;
}
/* 650px screens */
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
line-height: 50px;
font-size: 1.0em;
display: inline-block;
}
It looks like that because your PHP isn't being interpreted as PHP; it's being interpreted as (broken) HTML. Running PHP code (and avoiding having it rendered as HTML) requires a server running PHP, the software.
jsFiddle doesn't run PHP code, so you can't test PHP on there. You can only test HTML, CSS, and JavaScript.
EDIT: based on your edits to the question and your comments below, the problem is that you are calling session_start() twice. The resulting error is triggering output that is breaking your layout.
Is there a way to move the Buddypress "buddybar" from the admin bar into the navigation header of my theme. I want to use the "buddybar" menu and drop downs exactly as they are without being forced to use the admin bar.
I have been unable to find any documentation or forum discussions on this. Is there a starting function that can be called, that will load the "buddybar" elsewhere in my theme.
All you need is one piece of code to output most of what you need.
<?php bp_nav_menu(); ?>
Below is the the html and css is used to create the dropdown.
HTML
<ul class="dropdown-menu">
<li>
<ul id="drop-down-user-actions" class="ab-submenu hover">
<li id="drop-down-user-info"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo get_avatar( $current_user->ID, '65' );?></a></li>
<li id="drop-down-user-profile"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo $current_user->display_name ?></a></li>
<li id="drop-down-edit-profile"><a class="ab-item" href="<?php echo $link; ?>"><?php _e('Edit Profile','cactusthemes') ?></a></li>
<li id="drop-down-logout"><a class="ab-item" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Logout','cactusthemes') ?></a></li>
</ul>
</li>
<?php bp_nav_menu(); ?>
</ul>
CSS
#drop-down-user-info img {
position: relative;
width: 64px;
height: 64px;
float:left;
padding:0;
margin:0;
}
#drop-down-user-profile, #drop-down-edit-profile, #drop-down-logout {
margin-left: 80px;
}
#drop-down-user-profile {
color:#FFF;
}
#drop-down-user-profile > a {
text-transform: capitalize;
}
#menu-bp, #drop-down-user-actions {
padding: 6px 0;
background:#4c4c4d;
min-width: 264px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color:#C5C5C5
}
#drop-down-user-actions {
background:#26292c;
padding: 20px;
}
#menu-bp > li {
background:#4c4c4d;
}
#menu-bp > li > a, #menu-bp > li > ul > li > a {
padding-right: 1em;
padding-left: 1em;
line-height: 26px;
height: 26px;
white-space: nowrap;
min-width: 140px;
display: block;
}
#menu-bp > li.menu-parent:hover, #menu-bp > li.menu-parent > a:hover, #menu-bp .sub-menu li a:hover {
color: #e14d43;
}
#menu-bp .sub-menu li a {
color: #C5C5C5!important;
}
#menu-bp .sub-menu li a:hover {
color: #e14d43!important;
}
#menu-bp .menu-parent>a:before {
color: inherit!important;
position: relative!important;
font-size: 14px!important;
font-family: FontAwesome!important;
-webkit-font-smoothing: antialiased!important;
right: 5px!important;
top:0px!important;
content: "\f0d9"!important;
}
#menu-bp .menu-parent .sub-menu li > a:before, .dropdown-menu #drop-down-user-actions li > a:before {
content:none!important;
}
#menu-bp > li > ul {
display: none;
margin-left: 0;
left: inherit;
right: 100%;
padding:6px 10px;
margin-top:-32px;
position: absolute;
background:#4c4c4d;
}
#menu-bp .menu-parent:hover > .sub-menu {
display: block;
transition: all .1s ease;
}
#menu-bp > li > ul > li a {
padding:0;
}
#menu-bp li > a > span {
display:none;
}
#menu-bp > li > a {
pointer-events: none;
cursor: default;
}
This should give you a near exact copy of the buddybar but without the admin bar itself
Thanks to the inspiration from the previous answer I came up with this, which also includes the notification bit.
<?php
if (is_user_logged_in()) {
?>
<nav class="bp-nav" role="navigation">
<ul id="bp-nav-menu">
<li id="bp-nav-menu-notifications" class="menupop">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo $menu_link; ?>">
<?php echo $menu_title; ?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-notifications-default" class="bp-nav-menu-submenu">
<?php
$notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id(), 'object' );
$count = ! empty( $notifications ) ? count( $notifications ) : 0;
$alert_class = (int) $count > 0 ? 'pending-count alert' : 'count no-alert';
$menu_title = '<span id="ab-pending-notifications" class="' . $alert_class . '">' . number_format_i18n( $count ) . '</span>';
$menu_link = trailingslashit( bp_loggedin_user_domain() . bp_get_notifications_slug() );
if ( ! empty( $notifications ) ) {
foreach ( (array) $notifications as $notification ) {
?>
<li id="bp-nav-menu-notification-<?php echo $notification->id; ?>">
<a class="bp-nav-menu-item" href="<?php echo $notification->href; ?>">
<?php echo $notification->content; ?>
</a>
</li>
<?php
}
} else {
?>
<li id="bp-nav-menu-no-notifications">
<a class="bp-nav-menu-item" href="<?php echo $menu_link; ?>">
<?php echo __( 'No new notifications', 'buddypress' ); ?>
</a>
</li>
<?php
}
?>
</ul>
</div>
</li>
<li id="bp-nav-menu-my-account" class="menupop with-avatar">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit/">
<?php bp_loggedin_user_fullname(); ?><?php bp_loggedin_user_avatar( 'type=thumb&width=28&height=28' );?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-user-actions" class="bp-nav-menu-submenu hover">
<li id="bp-nav-menu-user-info">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>">
<?php bp_loggedin_user_avatar( 'type=thumb&width=64&height=64' );?>
</a>
</li>
<li id="bp-nav-menu-user-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php bp_loggedin_user_fullname(); ?>
</a>
</li>
<li id="bp-nav-menu-edit-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php _e('Edit My Profile', 'buddypress') ?>
</a>
</li>
<li id="logout">
<a class="bp-nav-menu-item" href="<?php echo wp_logout_url( get_permalink() ); ?>">
<?php _e('Log Out', 'buddypress') ?>
</a>
</li>
</ul>
<?php bp_nav_menu(); ?>
</div>
</li>
</ul>
</nav>
<?php
}
?>
The only thing is, I am moving the first <li> out into a functions.php func, because then I'll be able to check it for updates via ajax.
Here's some basic CSS to get started. You probably aren't going to want it to look like the admin bar so no need to try to duplicate that:
#bp-nav-menu > li {
display: inline-block;
}
#bp-nav-menu > li.menupop {
position: relative;
}
#bp-nav-menu > li.menupop .bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
#bp-nav-menu > li.menupop:hover .bp-nav-menu-sub-wrapper {
display: block;
}
#bp-nav-menu #bp-nav-menu-notifications > a {
padding: 0 0.5em;
}
#bp-nav-menu #bp-nav-menu-notifications > a span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
#bp-nav-menu #bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
}
#bp-nav-menu #bp-nav-menu-user-actions > li {
float: left;
clear: right;
}
#bp-nav-menu #bp-nav-menu-user-actions > li#bp-nav-menu-user-info {
clear: none;
}
#bp-nav-menu #menu-bp {
background: #aaa;
list-style: none;
padding: 0;
}
#bp-nav-menu #menu-bp .no-count {
display: none;
}
#bp-nav-menu #menu-bp .menu-parent {
position: relative;
}
#bp-nav-menu #menu-bp .menu-parent:before {
content: "\f141";
font-family: Dashicons;
}
#bp-nav-menu #menu-bp .menu-parent .sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
}
#bp-nav-menu #menu-bp .menu-parent:hover .sub-menu {
display: block;
}
If you happen to prefer LESS like me:
#bp-nav-menu {
> li {
display: inline-block;
&.menupop {
position: relative;
.bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
&:hover {
.bp-nav-menu-sub-wrapper {
display: block;
}
}
}
}
#bp-nav-menu-notifications {
> a {
padding: 0 0.5em;
span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
}
}
#bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
> li {
float: left;
clear: right;
&#bp-nav-menu-user-info {
clear: none;
}
}
}
#menu-bp {
background: #aaa;
list-style: none;
padding: 0;
.no-count {
display: none;
}
.menu-parent {
position: relative;
&:before {
content: "\f141";
font-family: Dashicons;
}
.sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
> li {
}
}
&:hover .sub-menu {
display: block;
}
}
}
}
I am trying to create a forum software and I would like when my breadcrumb links, change depending on what I clicked:
And:
Here is how my files are coordinated:
header.php, index.php, members.php, css/style.css
I would like that the element automatically changes according to the clicked page.
header.php code:
<div id="top_bar">
<div class="wrapper">
<div id="top_bar_links">
<ul>
<?php
$full_name = $_SERVER["PHP_SELF"];
$name_array = explode("/",$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li>
<a class="<?php echo ($page_name=="index.php")?"active":"";?>" href="index.php">Forums</a>
</li>
<li>
<a class="<?php echo ($page_name=="members.php")?"active":"";?>" href="members.php">Members</a>
</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="wrapper">
<h1 id="logo">
NextGenFocus
</h1>
<div id="user_links">
<ul>
<li id="sign_up">
Sign Up
</li>
<li id="sign_in">
Sign In
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb_top">
<div class="breadcrumb_links">
<ul>
<li class="forums">
Forums
</li>
</ul>
</div>
</div>
</div>
</div>
index.php and members.php code:
<?php
include "header.php";
?>
style.css code:
/* CORE */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
body {
background-color: #e6e9ed;
color: #000;
font-family: "Trebuchet MS", sans-serif;
font-size: 13px;
margin: 0;
padding-bottom: 15px;
}
.wrapper {
width: 980px;
margin: 0 auto;
}
a {
color: #4d7799;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
}
/* TOP BAR */
#top_bar {
background-color: #262d35;
height: 55px;
}
#top_bar_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#top_bar_links a {
color: #fff;
opacity: 0.6;
float: left;
display: block;
line-height: 55px;
padding: 0 25px;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
#top_bar_links a.active {
background-color: #000;
opacity: inherit;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
/* HEADER */
#header {
background-color: #3d5e78;
height: 115px;
margin-bottom: -25px;
}
#logo {
float: left;
}
#logo a {
color: #fff;
font-size: 25px;
line-height: 90px;
}
#logo a:hover {
text-decoration: none;
}
#user_links li {
float: right;
}
#user_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#user_links a {
color: #fff;
line-height: 90px;
margin-left: 15px;
}
/* CONTAINER */
#container {
background-color: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
padding: 15px;
}
#breadcrumb_top {
background-color: #f5f5f5;
height: 45px;
margin: -15px -15px 15px -15px;
}
#breadcrumb_bottom {
background-color: #f5f5f5;
height: 45px;
margin: 0 -15px -15px -15px;
}
.breadcrumb_links ul {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb_links li {
float: left;
}
.breadcrumb_links a {
color: #000;
line-height: 45px;
margin-left: 15px;
}
.separator {
margin-left: 10px;
}
It seems you need to put something dynamic where you presently have 'Forums'. You have your pagename (members.php) in the variable $page_name, so try this:
<?php echo ucfirst(str_replace('.php', '', $page_name)) ?>
That will remove the ".php" from the string (so it turns into "members") and then upper-case the first letter (so it turns into "Members"). Don't be afraid to try out some other string operations if you need to adjust it further!
Hey I am making a menu for a website for a project I am doing and I couldn't get the Menu item "Login" to align right. I would appreciate it if someone would help me. Also I would be happy to give you any other parts of the code you need. Thanks Joshua
CSS Code
html, body {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
font-family: Arial;
font-size: 14px;
color: #000;
padding: 0;
margin: 0;
}
h1, h2, h3 {
margin-bottom: 40px;
}
p {
margin-bottom: 10px;
line-height: 22px;
}
.title-box {
font-size: 25px;
padding: 15px;
background-color: #fff;
color: #fff;
font-weight: 700;
}
.title-box a {
color: #fff;
text-decoration: none;
}
.header {
background-color: #42444f;
/*margin:20px 10px 0 10px;*/
margin: 0;
color: #acadb1;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.header_left_box {
float: left;
}
.header_right_box {
float: right;
}
.header a {
text-decoration: none;
}
.header li.active a,
.header li.active:hover a {
color: #fff;
background-color: #2c2f3b;
}
.header li:hover a {
color: #fff;
}
.content {
padding: 45px 35px;
margin: 0;
min-height: 250px;
}
.content a {
text-decoration: underline;
color: #2C2F3B;
}
.footer {
background-color: #42444f;
color: #acadb1;
font-size: 15px;
font-weight: bold;
padding: 30px 35px;
margin: 0;
}
h1 {
font-size: 40px;
margin-top: 0;
}
h2 {
font-size: 25px;
margin-top: 0;
}
.feedback {
border: 1px solid black;
color: black;
padding: 20px;
font-size: 16px;
margin-bottom: 35px;
}
.feedback.error {
border: 1px solid red;
color: red;
}
.feedback.success {
border: 1px solid green;
color: green;
}
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu {
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
ul#menu li {
margin-left: -4px;
}
ul#menu li:first-of-type {
margin-left: 0;
}
ul#menu ul.sub-menu {
padding-bottom: 5px;
}
ul#menu ul.sub-menu li {
margin-left: 0;
}
ul#menu li a {
color: #acadb1;
text-decoration: none;
padding: 15px;
font-weight: bolder;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
display:inline-block;
white-space: nowrap;
}
ul#menu li a:hover {
color: #fff;
}
ul#menu li.active a {
color: #fff;
}
ul#menu li.active ul a {
color: #acadb1;
}
ul#menu li ul.sub-menu li a:hover {
color: #fff;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 44px;
left: 0;
background-color: #42444f;
}
ul#menu li.active ul.sub-menu {
background-color: #2c2f3b;
}
ul#menu li ul.sub-menu li a {
padding: 10px 15px;
font-size: 12px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
.header .namebox {
float: right;
background-color: #1e2029;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
height: 100%;
line-height: 44px;
padding: 0 30px;
text-decoration: none;
}
.header .avatar {
float: left;
width: 44px;
height: 44px;
}
input, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
label {
display: block;
margin-bottom: 5px;
line-height: 20px;
}
input {
display: block;
margin-bottom: 15px;
padding: 10px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
border: 1px solid #ddd;
color: #555;
font-weight: bold;
}
input[type="submit"] {
border: 0;
background-color: #2C2F3B;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.remember-me-checkbox {
float: left; min-width: 0; margin: 3px 10px 15px 0;
}
.remember-me-label {
float:left; min-width: 0; font-size: 12px; color: #888;
}
.login-submit-button {
float: none; clear: both;
}
.login-form-password-pattern-reminder {
display: block;
color: #999;
font-size: 11px;
}
.login-default-box,
.login-facebook-box {
display: inline-block;
width: 300px;
vertical-align: top;
}
a.facebook-login-button,
a.facebook-register-button {
background-color: #3b5998;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bolder;
padding: 15px 20px;
border-radius: 4px;
}
a.facebook-login-button:hover,
a.facebook-register-button:hover {
background-color: #2f477a;
}
.register-default-box,
.register-facebook-box {
display: inline-block;
width: 300px;
vertical-align: top;
}
.clear-both {
clear: both;
}
.debug-helper-box {
position: fixed;
bottom: 20px;
right: 0;
padding: 20px;
color: #fff;
background-color: red;
font-weight: bold;
}
#media only screen and (max-width:800px) {
.header_left_box,
.header .avatar {
float: none;
}
.header_right_box {
width: 100%;
background-color: #1E2029;
}
ul#menu li {
width: 100%;
text-align: center;
margin-left: 0;
}
ul#menu li a {
display: block;
}
ul#menu li ul.sub-menu {
display: block;
position: relative;
top: 0;
}
ul#menu li ul.sub-menu li {
font-size: 12px;
background-color: #4a4c55;
}
ul#menu li.active ul.sub-menu li {
background-color: #2C2F3B;
}
ul#menu ul.sub-menu {
padding-bottom: 0;
}
}
.avatar img {
width: 44px;
height: 44px;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid black;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
height:100%;
margin:0px;padding:0px;
} tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
} tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
} tr:hover td{
background-color:#ffffff;
}
td{
vertical-align:middle;
background-color:#ffffff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
} tr:last-child td{
border-width:0px 1px 0px 0px;
} tr td:last-child{
border-width:0px 0px 1px 0px;
} tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
tr:first-child td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #ff0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #ff0000) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #ff0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#ff0000'); background: -o-linear-gradient(top,#ff7f00,ff0000);
background-color:#ff7f00;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #ff0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #ff0000) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #ff0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#ff0000'); background: -o-linear-gradient(top,#ff7f00,ff0000);
background-color:#ff7f00;
}
tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
Menu Code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo URL; ?>application/libs/css/reset.css" />
<link rel="stylesheet" href="<?php echo URL; ?>application/libs/css/style.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>application/libs/js/application.js"></script>
</head>
<body>
<div class='title-box'>
<img src=''>
</div>
<div class="header">
<div class="header_left_box">
<ul id="menu">
<li <?php if ($this->checkForActiveController($filename, "index")) { echo ' class="active" '; } ?> >
Forum
</li>
<li <?php if ($this->checkForActiveController($filename, "helpcenter")) { echo ' class="active" '; } ?> >
Help Center
</li>
<?php if (Session::get('user_logged_in') == true):?>
<li <?php if ($this->checkForActiveController($filename, "dashboard")) { echo ' class="active" '; } ?> >
Dashboard
</li>
<?php endif; ?>
<?php if (Session::get('user_logged_in') == true):?>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
My Account
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Change account type
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Upload an avatar
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my username
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my email
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Edit my password
</li>
<li <?php if ($this->checkForActiveController($filename, "login")) { echo ' class="active" '; } ?> >
Logout
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 1):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 2):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
Teacher
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_type') == 3):?>
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
Student
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "student")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
Teacher
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "teacher")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<li <?php if ($this->checkForActiveController($filename, "admin")) { echo ' class="active" '; } ?> >
Admin
<ul class="sub-menu">
<li <?php if ($this->checkForActiveController($filename, "admin")) { echo ' class="active" '; } ?> >
</li>
</ul>
</li>
<?php endif; ?>
<?php if (Session::get('user_logged_in') == false):?>
<li class='right' <?php if ($this->checkForActiveControllerAndAction($filename, "login/index")) { echo ' class="active" '; } ?> >
Login
</li>
<?php endif; ?>
</ul>
</div>
<?php if (Session::get('user_logged_in') == true): ?>
<div class="header_right_box">
<div class="namebox">
Hello <?php echo Session::get('user_name'); ?>!
</div>
<div class="avatar">
<?php if (USE_GRAVATAR) { ?>
<img src='<?php echo Session::get('user_gravatar_image_url'); ?>'
style='width:<?php echo AVATAR_SIZE; ?>px; height:<?php echo AVATAR_SIZE; ?>px;' />
<?php } else { ?>
<img src='<?php echo Session::get('user_avatar_file'); ?>'
style='width:<?php echo AVATAR_SIZE; ?>px; height:<?php echo AVATAR_SIZE; ?>px;' />
<?php } ?>
</div>
</div>
<?php endif; ?>
<div class="clear-both"></div>
</div>
.header_left_box { }
ul#menu li:last-child {
float: right;
}
As I stated earlier, you need to restructure your menu code for this to work. This works http://jsfiddle.net/andyjh07/MVzR7/
Try adding float:right to ul#menu
ul#menu {
float:right;
}
If it'll not work then I have to see some working demo of your code.
UPDATE
http://jsfiddle.net/dwebexperts/fL3tG/
I think I got the issue. Your code is:-
<div class="header_left_box">
Your menu is here I think
</div>
<div class="header_right_box">
//Your other code
</div>
AND
Your CSS is:-
.header_left_box {
float: left;
}
.header_right_box {
float: right;
}
It shows that div containing your Menu will be on left side. You have to inter-change the classes of both the divs or you can take your menu our of this div <div class="header_left_box">
Remove width: 100%; from this:-
ul#menu li {
width: 100%;
text-align: center;
margin-left: 0;
}
Use this in your css menu field:
float:right;