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
Related
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 have a bootstrap template that I am working with, however Once I was ready to start linking pages I noticed that the links to the other pages in the UL were not working as I expected. I searched through the site, tried a few of the fixes and posts however with no luck. Also if anyone can see it I have a second issue that is not as pressing at this time but the mobilized version of the menu expands but does not retract when you click on the hamburger icon. Any insight is much appreciated. Thank You in advance!
.navigation {
min-height: 70px;
}
.navigation .navbar {
border: none;
margin-bottom: 0;
min-height: 70px;
}
.navigation .navbar .navbar-brand {
color: #fff;
font-size: 40px;
font-weight: 700;
height: 70px;
line-height: 35px;
}
.navigation .navbar-default {
background-color: #0091D5;
box-shadow: 0 0px 10px rgba(0,0,0,.2);
border: none;
border-radius: 0;
clear: both;
}
.navigation .navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 500;
padding-top: 25px;
padding-bottom: 25px;
}
.navigation .navbar-default .navbar-nav>li>a:hover,
.navigation .navbar-default .navbar-nav>.active>a,
.navigation .navbar-default .navbar-nav>.active>a:hover,
.navigation .navbar-default .navbar-nav>.active>a:focus {
background: none;
color: #FFFFFF;
}
.navigation .btn-default:hover,
.navigation .btn-default:focus,
.navigation .btn-default:active,
.navigation .btn-default.active {
border-color: transparent;
}
<section id="menu">
<div class="navigation">
<div id="main-nav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</div> <!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="ulnav" class="nav navbar-nav">
<li> Home</li>
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About Us</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div><!-- end .navbar-collapse -->
</div> <!-- end .container -->
</div> <!-- end #main-nav -->
</div> <!-- end .navigation -->
</section>
Did you include boostrap?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head<
Issue resolved in the comments sections. This instance was related to a pre-packaged one page template which had navigation modifications in it's default JS libraries.
please do these steps.
First you have to load bootstrap.added these links to head section.
<head>
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Then You can add these code part in body section.
<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">
<li> Home</li>
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About Us</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
i check this cord.it's works without any issue.i attached snapshot also.please check it.
So I've changed the css so that the navigation bar's height matches the logo's height. It works great but when I collapse it to mobile view, there is a line that's bothering me, look at the picture:
This is normal destop version:
This is collapsed mobile view:
This is collapsed mobile view when I press the burger menu. This is the problem, the grey line is out:
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
<!-- bg-warning = Pozadina zuta -->
</body>
</html>
This is my css:
.navbar-default .navbar-nav>li>a {
padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 21px;
padding-top: 10px;
padding-bottom: 10px;}
}
#media (max-width: 767px) {
.navbar-default {
line-height: 21px;
padding-top: 0px;
padding-bottom: 11px;}
}
This is the solution:
Open bootstrap.min.css file
Search for this code:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px
}
Add height:150px to the end of the above code.
After adding the code it may like this:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px;
height:150px;
}
Then save and check again.
I'm doing the web developer course at FreeCodeCamp, and I'm stuck on the task in which I need to make my own portfolio webpage. It needs to be a single-page scroll style webpage with 3 or more sections which can be accessed from the nav bar or by scrolling. So far, I have created a basic layout and have gotten (almost) everything to work. However, someone said that the webpage wasn't properly scaled for higher res screens.
Now, to fix that, I set width and height to 100% for all images in my CSS file. I've used 1920x1080 images, so I assume that might be the issue. Correct me if I'm wrong, but I think using .svg images should help with that. However, that only relates to the images and on desktop. On mobile, the webpage looks very bad and some of the text is covered by the navbar.
So, how would I go about fixing that? I am a beginner, so please excuse me if this is a very basic question.
My code:
$(document).ready(function(){
$('.nav li a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 750);
return false;
}
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#import url('https://fonts.googleapis.com/css?family=Oswald');
body {
padding-top: 70px;
}
.hello {
padding-top: 70px;
background-image: url("https://images3.alphacoders.com/853/85305.jpg");
background-repeat: no-repeat;
min-height:100%;
min-width:100%;
background-attachment: fixed;
padding-bottom: 100%;
}
.hello h1 {
font-family: Oswald;
text-align: center;
color: white;
font-size: 125px;
}
.hello h3 {
font-family: Oswald;
text-align: center;
color: white;
}
.hello h5 {
font-family: Oswald;
text-align: center;
color: white;
}
.jumbotron {
background-color: grey;
}
#projects {
background-image: url("http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-heavenly-landscape-photography-magazine-pdf-landscape-wildlife-photography-magazine-landscape-photography-magazine-uk-the-landscape-photography-magazine-essential-guide-to-lan.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:100%;
min-width:100%;
padding-top:100px;
padding-bottom:100%;
}
#projects h2 {
color: #f2f2f2;
font-family: monospace;
text-align: center;
font-size: 15px;
}
.placeholder1 {
padding-left: 150px;
align: left;
}
.placeholder2 {
padding-right: 150px;
align: center;
}
.placeholder3 {
padding-right: 150px;
align: right;
}
#about {
background-image: url("https://i.ytimg.com/vi/n-9ZLWnFbOI/maxresdefault.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:1000px;
width: 100%;
padding-top: 30px;
}
.infoLeft {
color: white;
font-family: Oswald;
padding-left: 17px;
text-align: left;
}
.infoRight {
color: #000;
font-family: Oswald;
padding-right: 17px;
text-align: right;
}
.infoCenter {
color: #000;
font-family: monospace;
text-align: center;
padding-top: 25px;
font-size: 15px;
}
#contact {
background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463674617/full_hd_nature_wallpapers_1080p_desktop_river_and_autumn_forest_d1dest.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
width: 100%;
padding-bottom: 100%;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle 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="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="hello" id="home">
<h1></h1>
<h1></h1>
<h1>Hello.</h1>
<div class="jumbotron">
<h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
<h5>You can navigate through the webpage using the four hyperlinks, or you can scroll.</h5>
</div> <!-- end Jumbotron -->
</div> <!-- end Home -->
<div id="projects">
<h2>This area will be updated with a list of all my projects. This is my first one.</h2>
<div class="row">
<div class="col-xs-6 col-md-3 placeholder1">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder1 -->
<div class ="col-xs-6 col-md-3 placeholder2">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder2 -->
<div class ="col-xs-6 col-md-3 placeholder3">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder3 -->
</div>
</div> <!-- end Projects -->
<div id="about">
<div class="infoLeft">
<h1>About Me:</h1>
</div> <!-- end infoLeft -->
<div class="infoRight">
<h4>I am a teen who loves everything with an engine and is fascinated by technology.</h4>
<h4>I just got done with A Levels and am enjoying the freedom!</h4>
</div> <!-- end infoRight -->
<div class="infoCenter">
<h3>Scroll down or click on Contact on the navigation bar to see the contact options.</h3>
</div> <!-- end infoCenter -->
</div> <!-- end About -->
<div id="contact">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</div> <!-- end Contact -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
This project's CodePen link: http://codepen.io/AnInternetUser/pen/zqVZBL?editors=0010
Try to make your navbar collapsible (and toggleable) in mobile views.
add bootstrap.min.js
change the HTML-code for toggle button by <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
wrap <ul class="nav" ... into <div id="navbar" class="navbar-collapse collapse">
That's my code for your navbar:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
http://codepen.io/glebkema/pen/GZbaWE
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.