So i want the list of the dropdown to be in the same line I don't know why it goes to the right
Bug Drop Down
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Mensagens
</li>
<li>Suporte
</li>
<li><a href='corpo.php?option=LOGOFF'>Logoff</a>
</li>
</ul>
....Try this....
For css:
.dropdown{
float: right;
}
.btn{
background-color: #2952a3;
color: white;
}
For HTML:
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Mensagens</li>
<li>Suporte
<a href='corpo.php?option=LOGOFF'>Logoff</a>
</li>
</ul>
</div></div>
Its with CSS of the anchor tags in the list item of dropdown menu.
It is set it the following by default:
.dropdown-menu > li > a {
padding: 3px 20px;
}
If you change the padding to 12px , it directly aligns with the dropdown button text.
.dropdown-menu > li > a {
padding: 3px 12px;
}
.dropdown-menu{
min-width:120px;
}
That is same as the default padding for the btn class.
This should fix the shift.
Also changing min-width property as your list items are declared to be inline.
Related
I am using laravel and when the page is refresh the active item on sidebar is not selected, this : li class="{{ (request()->is('admin/cities*')) ? 'active' : '' }}"> (is a easy solution), but not looks great. How i can make this using jquery or other?
$(document).ready(function() {
$('ul li a').click(function() {
$('li a').removeClass("active");
$(this).addClass("active");
});
});
<style>.sidebar-link.active,
.sidebar-link:focus {
background: #e2e8ed;
color: grey !important;
text-decoration: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar py-3">
<ul class="sidebar-menu list-unstyled">
<li class="sidebar-list-item"><a href="/test" class="sidebar-link text-
muted active"><i class="la la-dashboard mr-3 text-gray "></i>
<span>Dashboard</span></a>
</li>
<li class="sidebar-list-item"><a href="/test2" class="sidebar-link text-
muted"><i class="la la-dashboard mr-3 text-gray "></i>
<span>Test</span></a>
</li>
<ul>
</div>
I am pretty new to Bootstrap and php.
I want my navigation to have a centered brand with logo and the links to different pages left and right next to the logo. Then I want to have social media icons on the top right.
In the mobile view I want a different order of menu items. the brand with logo on the top and the social media at the bottom.
Does this make any sense? Here is my code so far. I have no idea how I can use the navwalker on this custom menu.
<a class = "navbar-brand visible-xs" href = "<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="logo">" width="50">
</a><!-- /navbar-brand visible-xs -->
<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> <!-- /navbar-toggle -->
</div> <!-- /navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right hidden-xs social ">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-500px"></i></li>
</ul><!-- /hidden-xs social -->
<ul class="nav navbar-nav navbar-center">
<li>HOME</li>
<li>PORTFOLIO</li>
<li class="dropdown hidden-xs"><img id="logo-navbar-middle" src="C:\Users\Carolin_2\Desktop\nicole\logonew.png" width="50"</img></li>
<li>LEISTUNGEN</li>
<li>KONTAKT</li>
</ul><!-- /navbar-nav -->
<ul class="nav navbar-nav navbar-center visible-xs social nav-pills">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-500px"></i></li>
</ul><!-- /visible-xs social -->
</div> <!-- /navbar-collapse-->
</div><!-- /container fluid-->
CSS Code
/* === NAVBAR ===*/
.navbar{
background-color: black;
margin-bottom: 0;
border: 0;
}
.navbar-inverse .navbar-nav>li>a{
text-align: center;
color: white;
display: inline-block;
float:none;
vertical-align: top;
}
#media (min-width: 768px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-inverse .navbar-toggle -.icon-bar{
color: white;
}
Can anybody help me or give me some advice?
Best,
Carolina
I've got a header page which contains a navbar, logo and another navbar.
On a desktop the first navbar contains the information to the right hand side which is perfect as seen below:
However when I change to a small screen it comes up like below:
Is there a way to change this so that on a small screen it it won't collapse?
If any css is needed is it also possible to change the ID so it will not interfere with my other NavBar and its CSS?
At the moment my code:
<div class="container-fluid">
<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>
<li><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?> </li>
</ul>
</div>
Thank you for any help!
Edit:
This is my other navbar which sits below my logo which works perfectly:
I hope this helps some more.
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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=".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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Collections</li>
<li>Jewellry</li>
<li>Offers</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
CSS for this navbar:
.navbar .navbar-nav {
display: inline-block;
float: none;
color: #000000;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-default {
background-color: #44B5DB;
border-color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #FFFFFF;
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
I thought it might be easier showing a picture.
So basically my Navbar #1 needs to show:
Sign up | Login | Checkout
Even on small devices rather than one on top of each other.
As per the picture my current setup is: Navbar #1, Logo, Navbar #2
I hope this makes sense!
You can add some customization to the upper-navigation div to it doesn't collapse by using the navbar-default class as a base. And the upper and lower navbars lineup (they don't have to though).
I also adjusted your CSS so the links line-height works when you hover over them; the gap is removed now from the bottom.
.navbar-default.nav-top {
background: #fff;
}
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default .navbar-top li {
float: left;
font-size: 12px;
}
.navbar.navbar-custom {
background: #44B5DB;
border-color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a {
color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
background: #FFFFFF;
color: #000000;
width: 100%;
}
.navbar.navbar-custom .navbar-nav {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-custom .navbar-nav > li {
float: none;
display: inline-block;
}
.navbar.navbar-custom .navbar-nav {
width: 100%;
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar-default nav-top">
<div class="container">
<ul class="nav navbar-top">
<li><span class="glyphicon glyphicon-user"> </span> Sign Up
</li>
<li><span class = "glyphicon glyphicon-log-in"></span> Login
</li>
<li><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?>
</li>
</ul>
</div>
</nav>
<div class="container">
<nav class="navbar navbar-default navbar-custom">
<!-- 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-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Collections
</li>
<li>Jewellry
</li>
<li>Offers
</li>
</ul>
</div>
</nav>
</div>
Just make sure the list elements in your top navbar will be floated left on small screens. You also might want to float the parent element to the right.
I have added some extra classes so you do not overwrite the default style, because you do not want to affect other navbars as i suggest.
I am sure you will get the idea.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* Keep list elements floated so they do not collapse */
.navbar-nav>li.top-nav {
float: left;
}
/* keep the ul floated to the right */
.top-nav-right {
float: right!important;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
color: #000000;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-default {
background-color: #44B5DB;
border-color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #FFFFFF;
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right top-nav-right">
<li class="top-nav"><span class="glyphicon glyphicon-user"> </span> Sign Up</li>
<li class="top-nav"><span class = "glyphicon glyphicon-log-in"></span> Login</li>
<li class="top-nav"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?> </li>
</ul>
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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=".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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Collections</li>
<li>Jewellry</li>
<li>Offers</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
I am using a script in my header.php to display how many users are registered (for example it says 79447 PLAYERS), but I want it to say 79,447 players instead. How would I go about adding commas? I've tried a few methods but failed.
<?php
include('session.php');
?>
<style>
.navbar {
font-family: 'Numans', sans-serif;
text-transform: uppercase;
}
.navbar-inverse {
background: #00aa00;
}
.dropdown-menu li a:hover, .dropdown-menu-default li a:hover {
color: #00aa00;
}
.dropdown-menu {
min-width: 100%;
border-radius: 0px;
}
.navbar .navbar-form .form-control-wrapper .form-control, .navbar .navbar-form .form-control {
text-transform: uppercase;
}
.nav>li>a>img {
max-width: 20px;
margin-right: 4px;
}
</style>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://epicmc.us">EPICMC</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<?php $remote_api = file_get_contents('http://epicmc.us/api.php?task=total'); $remote_job = json_decode($remote_api); echo '<li>'; echo ''; echo substr($remote_job->amount,0,75); ?> PLAYERS</li>
<li class="dropdown">
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" action ="stats.php" method="GET"><input type="text" name="player" class="form-control col-lg-8" autocomplete="off" placeholder="USERNAME"></form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<img src="https://minepic.org/avatar/20/<?php echo strtoupper($_SESSION['login_user']); ?>">
<?php if(isset($_SESSION['login_user'])){
echo "HOWDY, ";
echo strtoupper($_SESSION['login_user']);
} else {
Echo "HOWDY, GUEST";
}?><b class="caret"></b></a>
<ul class="dropdown-menu">
<?php if(isset($_SESSION['login_user'])){
echo '<li>ACCOUNT</li>';
echo '<li>NOTIFICATIONS <span class="badge">0</span></li>';
echo '<li>LOGOUT</li>';
} else {
echo '<li>LOGIN</li>';
}?>
</ul>
</li>
</ul>
</div>
</div>
From the code snippet it looks like the number of users is in the variable $remote_job->amount
echo number_format($remote_job->amount);
http://php.net/manual/en/function.number-format.php
1: I have a hierichal table of categories in my database:
2: I made this PHP script which turns this table into HTML: http://pastie.org/4591869
3: The HTML looks like this:
<script>
function toggleSubCategories(button) {
button = $(button);
button.parent().next().each(function() {
$(this).css('display') == 'none' ? $(this).css('display', 'inline') : $(this).css('display', 'none');
});
}
</script>
<div id="catlist">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Lots</button>
</li>
<ul style="display: inline; ">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Town Lots</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Bux Lots</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Wild Lots</button>
</li>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Items</button>
</li>
<ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Blocks</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Tools</button>
</li>
<ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-success">Enchanted</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-success">Normal</button>
</li>
</ul>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Services</button>
</li>
<ul style="display: none; ">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Trader Services</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Constructor Services</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Politician Services</button>
</li>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Labour</button>
</li>
</div>
4: I also have this CSS file:
#catlist {
list-style: none;
display: block;
}
#catlist ul {
list-style: inherit;
display: none;
}
#catlist ul li {
display: block;
list-style: inherit;
}
#catlist button {
width: 200px;
height: 50px;
margin: 5px;
font-size: 2.5em;
display: inline;
}
5: This currently looks like this (after I click on the first main category):
6: But I want it to like this:
What am I doing wrong? I'm literally pulling my hair out here.
I'm using CSS3, HTML5, JQuery, PHP and Twitter Bootstrap.
You need to change positioning of #catlist ul. Do:
#catlist { position: relative; }
#catlist ul { position: absolute; top: 0; left: 220px; }
Haven't tested, but should work. Next time add jsfiddle with code instead of pictures, this will let us play with your exact code and solve your problem.
I think you are looking for vertical css menu, have a look at this page