I'm having an issue where a dropdown menu in my website works on a desktop, but failed in mobile view.
The following is an example of a website I created: http://www.pakarraya.com/dropdown/
according to some examples of bootstrap dropdown menus in various references, here's the script I wrote:
<div class="navigation collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I beg for solutions from advanced colleagues, thank you very much
This will perfectly solves your problem please check i have uploaded screen shot also
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">Brand</a>
</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 navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li class="current">Home</li>
<li>About</li>
<li class="dropdown-menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Output
[![screenshot][1]][1]
Related
Why does my navbar both side have a white background color?
I used the developer tool to try and help me and the part that change it white was the navbar default. I try to change the css inside the developer tool using this and it work.
This is the part that I changed inside the developer tool:
.navbar-default {
background-color: blue;
}
I also tried to change in the app.css and change the navbar-default to blue but the problem is still occurring, and when I check inside the developer tool, the color code is white instead of the blue that I had just changed. But it works if I change it inside the developer tool.
I tried following this question, but it doesn't work as well:
Background color in navbar laravel.
My page consists of an HTML table, and I have used #extends to put the navbar inside this page. When I try doing it for other pages, the navbar works.
htmlTable.blade.php:
#extends('layouts.app')
#section('title', 'Summary')
#section('content')
<div class="container" style="background-color:#ADD8E8">
//content of my html table
</div>
#endsection
app.blade.php (navbar):
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
test.css (this is the CSS that I used):
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position:fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF ;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF ;
}
.navbar {background:#0000FF ;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
.dropdown-menu {
position: absolute;
top: 0;
left: 180px;
min-width: 180px;
}
This is what happens:
change this:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
to:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
The container-fluid class is the one you want
for some reason my sidebar color isn't changing, I have no idea why, it also even affect until my logout button which turn it into black in color. When I try to remove the code for the sidebar, the logout button color return back to normal. But I had already changed the color inside the css file already to another color but still doesn't work. Can anyone help me? Thanks in advance
When I used the chrome developer tool to try change the color at there it work but when I refresh it, the color black remains there again, but when I try to change it inside the code the color black still remains there also:
ul li a{
background:#ADD8E6;
Here is a screenshot: (all the way to the right is the logout button)
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Waiting List</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
style.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
background-color: blue;
}
#sidebar{
background:#ADD8E6;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#ADD8E6;
color:#ccc;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:#111;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
I Think Your CSS Has been Con fit , check That In enter image description here
I am trying a build a web portal which runs a php script script that calls a batch file in windows, which in turn executes a powershell script that run powercli to fetch required info from vmware vcenter. All the result is sent to a file named f1.txt and f1.html sources this file and displays the output.All my codes are below.
The below solution works but, I have a requirement to display some output instead of a blank page when f1.php script is running and waiting for output from the underlying powershell script f1.bat -> f1.ps1.
Some progress report or direct feedback from the php script would do while the webpage is waiting the php script to finish.
For eg: Loading... with blinking dots or output from the script itself.
I have tried the flush() method and ob_flush() method in f1.php but it just gives me a blank screen with the output and once the php script completes running the nav bar gets loaded below that output.The page is all mangled.
How can I get the desired result with minimal code manipulation. If ajax or javascript is required for the task, then I'm open to that as well.
I have the below in index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I have the below in f1.php file.
<?php
system("f1.bat");
header("Location:http://mickey.example.com/view/f1.html");
exit;
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I have the below in f1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
<script type="text/javascript">
<!--
var iframe = document.createElement("iframe");
iframe.src = "f1.txt";
iframe.width = "20000";
iframe.height = "20000";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
//-->
</script>
</body>
</html>
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