I have problem with coding a header, the header I have coded is being displayed well in Chrome, but its not in Firefox. (In Firefox its a bit Missy).
(the header is responsive and coded using Bootstrap 3)
photos explains the problem:
The header In Chrome:
(nice and clean)
The header In Firefox:
(missed up)
this problem happened when I made the top bar.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="js/respond.js"></script>
</head>
<body>
<!-- top bar starts -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="social-icons">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</div>
<div class="col-xs-6">
<ul class="sign-options pull-right">
<li>sign in</li>
<li><span>/</span></li>
<li>sign up</li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end top-bar div -->
<!-- top bar ends -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#greeny-header">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="Logo" class="img-responsive">
</div>
<!-- End Brand and toggle-->
<!-- navbar collapse -->
<div class="collapse navbar-collapse" id="greeny-header">
<!-- navigation list -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who are we</li>
<li>Action</li>
<li>List</li>
<li>Option</li>
<li class="divider"></li>
<li>Separated link</li>
<li>Separated link</li>
<li class="divider"></li>
<li>Action</li>
</ul>
</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
<li><span class="fa fa-search"></span></li>
</ul>
<!-- end navigation list -->
</div>
<!-- end navbar-collapse -->
</div><!-- end container -->
</nav>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
the CSS
/*
*********************
* =header
*********************
*/
.navbar-default{
height: 100px;
}
#greeny-header{
margin-top: 25px;
}
.navbar-header a{
margin-top: 15px;
}
.navbar-header a{
padding-top: 0;
padding-bottom: 0;
}
.navbar-nav span{
font-size: 25px;
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
/*
*********************
* =top-bar
*********************
*/
.top-bar{
background-color: #2b2b2b;
height: 40px;
}
.social-icons{
margin-top: 2px;
padding-left: 0;
}
.social-icons li{
display: inline;
font-size: 23px;
padding-right: 20px;
}
.social-icons span{
color: #a59f9a;
}
.social-icons span:hover{
color: #e1e1e1;
}
.sign-options{
margin-top: 7px;
}
.sign-options li{
display: inline;
font-size: 14px;
text-transform: uppercase;
padding-left: 7px;
}
.sign-options a{
color: #b3aca7;
text-decoration: none;
}
.sign-options a:hover{
color: #e1e1e1;
}
.sign-options span{
color: #d79450;
}
try to wrap any div with container div inside to row. I did it in this Demo.
Basically used your code and wrapper every section into row class. I tested with browser stack and it looks fine now.
I added the link to new screenshot "Win XP, FF v15.0". Here to screenshot
Add the float : left property to the logo style.
This is why I love Firebug. Looking at the computed styles and the layout will give you your answer right away. There are two usual suspects in this type of problem: 1) the display styles are not set to inline; or 2) There is a problem with the float.
Related
I have seen several people describe similar problems but none of what I have seen or tried has fixed my issue. I am storing Font Awesome 5 files locally but when I try to add some icons they do not appear in the browser. I have tried several browsers and all have the same result. I suspect the error is in how I have my CSS files configured or I need to add another FA file to my local machine, but I have not been able to prove either of these hypothesis. The snippet below does not work because I am running xampp and storing the files locally so I am also attaching some images of the maximum window as well as smaller window.
Smaller Window:
Max Window:
File Location:
/*General Styles */
body {
font-family: "Roboto", Helvetica, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/*Top Navbar Styles*/
#top{
background: #555555;
padding: 10px 0;
}
#top.offer{
text-transform: uppercase;
color: #ffff;
}
#top.offer.btn{
text-transform: uppercase;
}
#media (max-width: 991px) {
#top.offer{
margin-bottom: 10px;
}
}
#media (max-width: 991px){
#top{
font-size: 12px;
text-align: center;
}
}
#top a {
color: #fff;
}
#top ul.menu{
padding-top: 5px;
margin: 0;
text-align: right;
font-size: 12px;
list-style: none;
}
#media (max-width: 991px){
#top ul.menu{
text-align: center;
}
}
#top ul.menu > li{
display: inline-block;
}
#top ul.menu > li a{
color: #eeeeee;
}
#top ul.menu > li + li:before{
content: "|\00a0";
padding: 0 5px;
color: #f7f7f7;
}
<!DOCTYPE html>
<html>
<head>
<title>E Commerce Store</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<link href="font-awesome/css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<div id="top"><!--top start -->
<div class="container"><!-- container start -->
<div class="col-md-6 offer"><!-- col md-6 offer start -->
Welcome : Guest
<a href="#" >Shopping Cart Total Price: $100, Total Items 2 </a>
</div><!-- col md-6 offer end -->
<div class="col-md-6"><!-- col md-6 start -->
<ul class="menu"><!-- menu start -->
<li>Register</li>
<li>My Account</li>
<li>Go to Cart</li>
<li>Login</li>
</ul><!-- menu end -->
</div><!-- col md-6 end -->
</div><!-- container end -->
</div> <!-- top end -->
<div class="navbar navbar-default" id="navbar"><!-- navbar navbar-default start -->
<div class="container"><!-- container start -->
<div class="navbar-header"><!-- navbar-header start -->
<a class="navbar-brand home" href="index.php">
<img src="images/logo.png" alt="company logo" class="hidden-xs">
<img src="images/logo-small.png" alt="company logo" class="visible-xs">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span><i class="fas fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="navbar-toggle" data-target="#search">
<span class="sr-only">Toggle Search</span><i class="fas fa-search"></i>
</button>
</div><!-- navbar-header end -->
<div class="navbar-collapse collapse" id="navigation"><!-- navbar-collapse collapse start -->
<div class="padding-nav" ><!-- padding-nav start -->
<ul class="nav navbar-nav navbar-left"><!-- nav navbar-nav navbar-left start -->
<li class="active">Home</li>
<li>Shop</li>
<li>My Account</li>
<li>Shopping Cart</li>
<li>Contact Us</li>
</ul><!-- nav navbar-nav navbar-left start -->
</div><!-- padding-nav end -->
<a class="btn btn-primary navbar-btn right" href="cart.php"><i class="fas fa-shopping-cart"></i><span>4 items in cart</span></a>
<div class="navbar-collapse collapse right"><!-- navbar-collapse collapse right start -->
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search"><span class="sr-only">Toggle Search</span><i class="fas fa-search"></i></button>
</div><!-- navbar-collapse collapse right end -->
</div><!-- navbar-collapse collapse end -->
</div><!-- container end -->
</div><!-- navbar navbar-default end -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using fontawesome.min.css via CDN none of your icons render. When using all.min.css they all do.
Tested with "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" and "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
Working fiddle
Non-working fiddle
I am having a problem I have setup an navigation menu to show when it is not in mobile view but its doesn't show up but when I go into mobile view and press my navigation button all my pages show up. Now when I go back into desktop mode it all working, so I was wondering what could be causing the navigation not to work in desktop mode.
here is my index.php and style.css.
/*
Template Name : Electronics Hub
Author Name : Marcus
Author Email : *******.iinet.net.au
Theme URL : www.electronicshub.tech / localhost/electronicshub
Theme Ver : 1.1
*/
/* General Style */
body{
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background: #f0f0f0;
overflow-x: hidden;
}
/* Top Styles */
#top{
background: #555555;
padding: 10px 0;
}
#top .offer{
color: #ffffff;
}
#top .offer .btn{
text-transform: uppercase;
}
#media(max-width: 991px){
#top .offer{
margin-bottom: 10px;
}
}
#media(max-width: 991px){
#top{
font-size: 12px;
text-align: center;
}
}
#top a{
color: #ffffff;
}
#top ul.menu{
padding-top: 5px;
margin: 0px;
text-align: right;
font-size: 12px;
list-style: none;
}
#media(max-width: 991px){
#top ul.mwnu{
text-align: center;
}
}
#top ul.menu > li{
display: inline-block;
}
#top ul.menu > li a{
color: #ffffff;
}
#top ul.menu > li + li:before{
content: "|\00a0";
color: #f7f7f7;
padding: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronics Hub</title>
<link rel="stylesheet" href="styles/bootstrap-337.min.css">
<link rel="stylesheet" href="font-awsome\css\font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="top"><!-- Top Begin -->
<div class="container"><!-- Container Begin -->
<div class="col-md-6 offer"><!-- Col-md-6 offer Begin -->
Welcome
4 times in your Cart | Cart Total Price: $300
</div><!-- Col-md-6 offer Finished -->
<div class="col-md-6"><!-- Col-md-6 offer Begin -->
<ul class="menu"><!-- Menu Begin -->
<li>
Register
</li>
<li>
My Account
</li>
<li>
Go to Cart
</li>
<li>
Login
</li>
</ul><!-- Menu Finished -->
</div><!-- Col-md-6 offer Finished -->
</div><!-- Container Finished -->
</div><!-- Top Finished -->
<div id="navbar" class="navbar navbar-default"><!-- Navbar navbar-default Begin -->
<div class="container"> <!-- Container Begin -->
<div class="navbar-header"><!-- Navbar-header Begin -->
<a href="index.php" class="navbar-brand home"><!-- Navbar-brand home Begin -->
<img src="images/ecom-store-logo.png" alt="Electronicshub Logo" class="hidden-xs">
<img src="images/ecom-store-logo-mobile.png" alt="Electronicshub Logo Mobile" class="visible-xs"></img>
</a><!-- Navbar-brand home Finished -->
<button class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-align-justify"></i>
</button>
<button class="navbar-toggle" data-toggle="collapse"data-target="#search">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search"></i>
</button>
</div><!-- Navbar-header Finished -->
<div class="navbar-collaspe collapse" id="navigation"><!-- Navbar-collaspe collapse Begin -->
<div class="padding-nav"><!-- Padding-nav Begin -->
<ul class="nav navbar-nav left"><!-- Nav navbar-nav left Begin -->
<li class="active">
Home
</li>
<li>
Shop
</li>
<li>
My Account
</li>
<li>
Shopping Cart
</li>
<li>
Contact Us
</li>
</ul><!-- Nav navbar-nav left Finished -->
</div><!-- Padding-nav Finished -->
</div><!-- Navbar-collaspe collapse Finished -->
</div><!-- Container Finished -->
</div><!-- Navbar navbar-default Finished -->
<script src="js/jquery-331.min.js"></script>
<script src="js/bootstrap-337.min.js"></script>
</body>
</html>
I expect the navigation menu to show up when it is in desktop mode not when I go into mobile navigation then it shows up.
The Error is in this line.
<div class="navbar-collaspe collapse" id="navigation"><!-- Navbar-collaspe collapse Begin -->
It should be :
class="navbar-collapse collapse"
The spelling was wrong , That's all .
Hope this helps.
The menu is working fine in desktop view with bootstrap4. Please try: http://jsfiddle.net/spyd8ezw/
I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".
In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li {
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after {
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after {
right:0;
left:0;
}
a:hover { color:red;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
You can use bootstrap to solve that problem and then apply your css to this bootstrap code.
<!DOCTYPE html>
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt=""></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">
<li>Home</li>
<li class="dropdown">
About Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropdown">
Units<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="jquery-3.1.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Just remember to change the <script src="jquery-3.1.0.min.js"></script> for your jquery file.
TESTED AND WORKING
Here your solution:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
height: 10vh;
background-color: #4D5061;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
nav ul li:hover a {
text-decoration: none;
color: red;
border-bottom: 1px solid red;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 93vh;
background-color: #A59E8C;
text-align: center;
color: white;
padding-top: 23vh;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.hero {
height: 750px;
}
h1 {
font-family: 'Roboto', sans-serif;
color: white;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #000000;
font-size: 50px;
}
.logo {
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down {
color: #4D5061;
}
footer {
height: 10vh;
}
</style>
<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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></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">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
</footer>
</html>
You miss the javascript files and some code as well...
Next time refere to http://getbootstrap.com and try to read all the documentation. Everything is super well documented there.
Also, if I can advice you, use an external css file to store your style...
It looks you are using Bootstrap, so try this code and I don't see bootstrap javascipt file in your code, which you have to link and jQuery of course.
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Let me know if you still couldn't figure out.
I have a weird question..
I use bootstrap for the first time and it's very awesome indeed. While coding my test website, I figured out something wrong in the monitor sizing.. and that's:
-I copied the navigation html code directly to new line
-I removed the hamburger icon for the switch toggle -show / dont show- from the second new created icon
-I modified the main content for the current element
-whenever I force small the monitor like alternativly telling the site I open from a small monitor, the second bar's element completely disappear. and since I already deleted the toggle button, I can't activate it nor doing anything but maximizing the size so it appears again.
The thing is, i want it to be completely appeared. No toggle thing, only compressing itself when its previewed from small monitor just like the navigation bar when I click on the hamburger icon
Any thoughts how to do this? Thanks and sorry for my awful annoying question. I know it's very annoying but, I just started learning this language and I may face some things in the process.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" media="screen" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<nav class="navbarmain navbar navbar-default mainnav">
<div class="container">
<!-- 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="#">S-Bolb</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">
<li class="active">Feed <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Pages <span class="caret"></span>
<ul class="dropdown-menu">
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
<li role="separator" class="divider"></li>
<li>Add Page
</li>
<li>Manage Pages
</li>
</ul>
</li>
<li>Trending
</li>
<li>co.Groups
</li>
<li>Find Friends
</li>
<li>Analytics
</li>
<li>Events
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="wrapper">
<div class="userpanel">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Ahmed T.
</li>
Senior Designer
<br>
View my profile
<br>
<a>1</a>-<a>2</a>-<a>3</a>-<a>4</a>-<a>5</a>
<br>
<li role="separator" class="divider"></li>
Connected Networks
<li>Facebook /username
</li>
<li>Twitter /username
</li>
<li>Instagram /username
</li>
<li>Tumblr /username
</li>
<li>Behance /username
</li>
add more
</ul>
<ul class="sidebar-nav">
<li>Liked Pages
</li>
<li>App Center
</li>
<li>Games Feed
</li>
<li>Customize Profile
</li>
</ul>
<ul class="sidebar-nav">
<li>Social Groups
</li>
<li>Group 1
</li>
<li>Group 2
</li>
<li><a>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</a>
</li>
</ul>
<ul class="sidebar-nav">
<li>My Account
</li>
<li>Settings
</li>
<li>Privacy Policy
</li>
<li>Advertising
</li>
</ul>
<a class="block-button" href="#">Logout</a>
</div>
<!-- feed -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="usercontrolbar navbar navbar-default">
<div class="container">
<!-- 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">view all <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
close friends (3) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Suzan William
</li>
<li>Boza Suman
</li>
<li>Cameron Wheeler
</li>
</ul>
</li>
<li class="dropdown">
custom category (15) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="font-size:22px;">Welcome back, Ahmed! <span class="glyphicon glyphicon-hand-left" id="menu-toggle" aria-hidden="true"></span></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/geometryangle.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
</body>
</html>
and the sidebar.css:
.row{
margin-right:0px;
margin-right:0px;
}
#wrapper {
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-right: -200px;
right: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: right;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-right: 0;
margin-right: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: right;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.choixMenu{
font-size: 12px;
float: right;
text-align-right;
margin-right: 1px;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-right: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-right: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
right: 70px;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
The second thing is:
How can I make the border sharp? Whenever I add new rule in CSS for all the layout to be with no border, it doesn't work, why is it soft from the edges and not completely 90 degree?
Answer to the second question:
To make the corners of your navbar you need to add the .navbar-static-top class like so:
<div class="navbar navbar-default navbar-static-top">
<!-- enter code here -->
</div>
I would suggest reinstalling the css file to get the toggle functions back.
Once you have that, within the Bootstrap CSS file, you can change when the Toggle function activates, this gives you the option to call the toggle on a certain screen-size.
secondquestion, you can either set the navbar-default/inverse to navbar-static-top, or if you want it to stick to the top, change the CSS to border-radius:0px !important
Hope this helps
I am trying to create a header for my website. I want to have my logo at the top left corner and my nav bar at the top right corner of the window. My issue is that the nav bar is not aligned flush with the center of my logo. Here's the goods:
#logoHeader {
float: left;
vertical-align: middle;
}
ul {
list-style: none;
display: inline block;
vertical-align: middle;
}
li {
float: right;
padding: 10px;
font-size: 22pt;
display: inline-block;
}
.header .navContainer {
height: 131px;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<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.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link type= "text/css" rel="stylesheet" href="all.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type = "text/javascript" src = "index.js"></script>
<title>JM</title>
</head>
<body>
<div class ="container">
<div class="row">
<div class="col-md-4 header">
<img id = "logoHeader" src="file:///Users/Jon/Desktop/JM.COM/images/bigJM.png"/>
</div>
<div class="cold-md-8 navContainer">
<ul class = "navBar">
<li>Home</li>
<li>Blog</li>
<li>Publications</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Follow Bootstraps Rules
http://getbootstrap.com/components/#navbar
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
</html>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
In your bootstrap.min.css change margin-top and margin-bottom to 0px for ol and ul selectors
Example
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
Also in your css codes in your question padding is also one of the issue. Setting a padding of 10px will result in top, bottom, left and right additional space.
change it to
li {
float: right;
/*padding: 10px;*/
padding-left: 10px;
padding-right: 10px;
font-size: 22pt;
display: inline-block;
}