I am trying to figure out why none of my css is being applied when previewing my code. I've checked my file tree and made sure everything is linked, but it just shows up as plain text. I am using html/css/bootstrap 3.0.2 and jquery CDN. I also tried changing the order of the links, but nothing I do seems to work. I've included a portion of my code to be as clear as possible as to what is going on. Any help or suggestions is greatly appreciated.
====================================================================
Fonts
====================================================================
***/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
#import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans', sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0,0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-box .sticky-menu{
position:relative;
}
#sidebar .menu-box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,255,0.20);
}
#sidebar .menu-box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,255,255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li.current a .fa,
#sidebar .menu-box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-box .sticky-menu > ul > li > a:hover,
#sidebar .menu-box .sticky-menu > ul > li.current > a,
#sidebar .menu-box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/***
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest Fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- Logo Box -->
<div class="logo-box">
<div class="logo"><img src="https://via.placeholder.com/180x78" alt="" title=""></div>
</div>
<!-- Logo -->
<div class="mobile-logo pull-left">
<img src="https://via.placeholder.com/230x46" alt="" title="">
</div>
<!-- Header Social Box -->
<div class="header-social-box clearfix">
</div>
<div class="outer-box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li>Home</li>
<li class="dropdown">About Us
<ul>
<li>About Us</li>
<li>Time Table</li>
<li>Comming Soon</li>
<li>Section Page 01</li>
<li>Section Page 02</li>
</ul>
</li>
<li class="dropdown">Trainers
<ul>
<li>Trainer 01</li>
<li>Trainer 02</li>
</ul>
</li>
<li class="dropdown">Shop
<ul>
<li>Shop Left Sidebar</li>
<li>Shop Right Sidebar</li>
<li>Product Single</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</li>
<li class="dropdown">Blog
<ul>
<li>Our Blog</li>
<li>Blog Classic</li>
<li>Blog Detail One</li>
<li>Blog Detail Two</li>
<li>Not Found</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
I think you missed the comment at first line in css. See:
/***
====================================================================
Fonts
====================================================================
***/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
#import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans', sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0,0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-box .sticky-menu{
position:relative;
}
#sidebar .menu-box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,255,0.20);
}
#sidebar .menu-box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,255,255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li.current a .fa,
#sidebar .menu-box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-box .sticky-menu > ul > li > a:hover,
#sidebar .menu-box .sticky-menu > ul > li.current > a,
#sidebar .menu-box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/***
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest Fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- Logo Box -->
<div class="logo-box">
<div class="logo"><img src="https://via.placeholder.com/180x78" alt="" title=""></div>
</div>
<!-- Logo -->
<div class="mobile-logo pull-left">
<img src="https://via.placeholder.com/230x46" alt="" title="">
</div>
<!-- Header Social Box -->
<div class="header-social-box clearfix">
</div>
<div class="outer-box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li>Home</li>
<li class="dropdown">About Us
<ul>
<li>About Us</li>
<li>Time Table</li>
<li>Comming Soon</li>
<li>Section Page 01</li>
<li>Section Page 02</li>
</ul>
</li>
<li class="dropdown">Trainers
<ul>
<li>Trainer 01</li>
<li>Trainer 02</li>
</ul>
</li>
<li class="dropdown">Shop
<ul>
<li>Shop Left Sidebar</li>
<li>Shop Right Sidebar</li>
<li>Product Single</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</li>
<li class="dropdown">Blog
<ul>
<li>Our Blog</li>
<li>Blog Classic</li>
<li>Blog Detail One</li>
<li>Blog Detail Two</li>
<li>Not Found</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
Related
I have some issue with a paragraph moving on hover, after some research I found many issue related with padding and margin so I tried some edit like :
to remove the padding
to remove the margin
to remove line-height
set position static or fixed on hover
Nothing worked, this mostly looks like a layout issue but I'm not very accommodate with it.
Any help would be appreciated.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
Adding this should work:
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
Try it in action in the snippet below.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
I've added this:
p:hover {
padding-left: 10px;
transition: 1s;
}
The 1 second transition is just for the example, and also you can come up with better css selector for those paragraphs.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 10px;
transition: 1s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
Tittle
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
If this solves your problem, plz mark it as your answer.
I need Centered Logo with Bootstrap fixed top navigation. Means Brand should be come at center of navigation.
My Sample Fiddle
.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>
.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a {
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
}
.CenterdLogo {
position: absolute;
transform: translateX(-50%);
left: 50%;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>
this is alternate solution for it.
.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
position:relative;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>
i tried to fix this, it may helps you.
.navbar-header.pull-left{
float:none !important;
}
.navbar-header.pull-right{margin-top: -21px;}
a.navbar-brand.CenterdLogo{float:none;}
.LandPageNavLinks{
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li{
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover{
text-decoration:none;
}
.navbar{
background:lightgray;
}
.navbar-header.pull-left{
float:none !important;
}
.navbar-header.pull-right{margin-top: -21px;}
a.navbar-brand.CenterdLogo{float:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header text-center pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>
I'm having a hard time centering a logo on the nav bar for a website I'm working on. I've tried a few things but nothing has been successful. I want to have the logo in the center of the nav bar and the other items on the left and right of it. Currently, everything is spaced out evenly, including the logo, so it is not centered. Any help would be appreciated.
HTML
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
<li>Products</li>
<li>Team</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
CSS
.main-nav-outer{
padding:0px;
border-bottom:1px solid #dddddd;
box-shadow:0 4px 5px -3px #ececec;
position:relative;
background:#fff;
}
.main-nav{
text-align:center;
margin:10px 0 0px;
padding:0;
list-style:none;
}
.main-nav li{
display:inline;
margin:0 1px;
}
.main-nav li a{
display:inline-block;
color:#222222;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height:20px;
margin:17px 32px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.main-nav li a:hover{
text-decoration:none;
color: #ec5020;
}
.small-logo{
padding:0 32px;
margin: 0;
}
.main-section{
padding:20px 0 110px;
}
you may wanna use bootstrap and try something like this
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<div class="row">
<div class="col-xs-5">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
</div>
<div class="col-xs-2">
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
</div>
<div class="col-xs-5">
<li>Products</li>
<li>Team</li>
<li>Contact</li>
</div>
</div>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
just change this selector in CSS with the below code
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 10px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
HTML:
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
<li>Products</li>
<li>Team</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
CSS:
.main-nav-outer{
padding:0px;
border-bottom:1px solid #dddddd;
box-shadow:0 4px 5px -3px #ececec;
position:relative;
background:#fff;
}
.main-nav{
margin-left:auto;
margin-right: auto;
list-style:none;
}
.main-nav li{
display:inline;
}
.main-nav li a{
display:inline-block;
color:#222222;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height:20px;
margin:17px 32px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.main-nav li a:hover{
text-decoration:none;
color: #ec5020;
}
.small-logo{
padding:0 32px;
}
.main-section{
padding:20px 0 110px;
}
Bootply
Try this:
.navbar-brand {
float: left;
text-align: center;
width: 378px;
}
.navbar-brand span {
margin: 0 auto;
text-align: center;
color:green;
}
.navbar-nav li a{
display:inline-block;
color:#222222;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height:20px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
<a class="navbar-brand hidden-xs text-center" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Menu Item 1</li>
</ul>
</div>
</div>
</nav>
When you click on Expand snippet you will see the result..
Please see a menu I'm using on a site below. It works fine in most browsers but with IE10 (IE11 is fine) when you hover over a menu item then go to select a sub menu item, when the cursor goes into any of the small gaps between the vertical sub menu items the menu thinks the user has went outside the submenu and it closes.
Can anybody tell me what is causing this to happen in IE10 and nothing else?
Regards,
Marc
#nav-wrap {
height:28px;
position:relative;
top:-70px;
width:100%;
margin:0 auto;
z-index:10;
text-align:center;
}
#nav {
font-size:15px;
font-weight:400;
text-align:center;
position:relative;
display:inline-table;
}
#nav ul li:hover > ul {
display:block;
}
#nav ul {
padding:0px;
margin:0px;
list-style:none;
position:relative;
}
#nav ul:after {
content:"";
clear:both;
display:block;
}
#nav ul li { /* KEY - Changes main nav bar li style */
float:left;
margin-left:14px;
margin-right:14px;
}
#nav ul li a {
display:block;
color:white;
text-decoration:none;
background:#416b8f;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul li a:hover {
background:#003768;
border-radius:0px;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
.selected {
background:#003768;
display:block;
color:white;
text-decoration:none;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul ul {
position:absolute;
top:100%;
text-align:left;
margin:0;
display:none;
}
#nav ul ul li {
float:none;
position:relative;
margin:0px;
font-size:14px;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
}
#nav ul ul li:hover {
}
#nav ul ul li a {
border-radius:0px;
padding-top:5px;
padding-bottom:5px;
}
#nav ul ul li a:hover {
background:#003768;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
#nav ul ul ul {
position:absolute;
left:100%; /* switch to left to change position of nested menus */
top:0;
}
li {
white-space: nowrap;
}
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT
<ul>
<li>ACET
<ul>
<li>ACET HELPS</li>
<li>ACCREDITATION</li>
</ul>
</li>
<li>FEATURES</li>
<li>WEB DASHBOARD</li>
<li>ACET 8</li>
<li>CLIENTS</li>
<li class="selected">NEWS</li>
</ul>
</li>
<li>SERVICES
<ul>
<li>TRAINING</li>
<li>SUPPORT
<ul>
<li>HELP DESK</li>
<li>USER GUIDE</li>
<li>ACET TECHNICAL PRACTICE</li>
</ul>
</li>
<li>DATA IMPORT</li>
<li>DEVELOPMENT</li>
</ul>
</li>
<li>ASSET INTEGRITY
<ul>
<li>INTEGRITY INFORMATION</li>
<li>INSPECTION & INTEGRITY MANAGEMENT</li>
<li>NON-DESTRUCTIVE TESTING
<ul>
<li>SPECIALIST INSPECTION SERVICES</li>
<li>INSPECTION METHOD CAPABILITY</li>
<li>INSPECTION METHOD SELECTION</li>
</ul>
</li>
<li>DATA SOLUTIONS</li>
</ul>
</li>
<li>DOWNLOADS
<ul>
<li>LATEST NEWSLETTER</li>
<li>ACET DATA SHEET</li>
<li>ASSET INTEGRITY BROCHURE</li>
<li>THE INSPECTION STANDARD
</li>
</ul>
</li>
</ul>
</div>
I'm trying to create a css drop down menu on my own and I got it to work but there is a problem with the width. When I hover over one of the menu items the drop down starts at the left side of the home link. I want the link to start on the left side of the link I'm hovering over. I'm not sure if what I said makes sense, so here's a fiddle: http://jsfiddle.net/nikito2003/qtDvL/. Thanks in advance for your help.
The html that I have is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/musictemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div align="center">
<table width="75%" border="1">
<tr>
<td><img src="images/logo-for-country.gif" width="144" height="144" alt="logo" />
<!-- InstanceBeginEditable name="EditRegion4" -->EditRegion4
<!-- InstanceEndEditable -->
</td>
</tr>
<tr>
<td><div class="menu" align="center">
<ul>
<li id="menu_item">Home</li>
<li id="menu_item">Musicians
<ul>
<li id="menu_sub_item">Toby Keith</li>
<li id="menu_sub_item">Rodney Atkins</li>
</ul>
</li>
<li id="menu_item">Songs
<ul>
<li id="menu_sub_header">Toby Keith</li>
<li id="menu_sub_item">Should’ve Been A Cowboy</li>
<li id="menu_sub_item">American Soldier</li>
<li id="menu_sub_item">How Do You Like Me Now</li>
<li id="menu_sub_header">Rodney Atkins
<li id="menu_sub_item">Watching You</li>
<li id="menu_sub_item">If You’re Going Through Hell</li>
<li id="menu_sub_item">He’s Mine</li>
</ul>
</li>
<li id="menu_item">Concerts</li>
</ul>
</div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="EditRegion3" -->EditRegion3<!-- InstanceEndEditable --></div>
</body>
<!-- InstanceEnd --></html>
And the css I have is:
#charset "utf-8";
/* CSS Document */
.audio {
float:right;
}
.menu {
margin:0;
padding:0;
width:100%;
}
.menu ul {
list-style:none;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu #menu_item {
list-style:none;
display:inline;
}
.menu #menu_item a {
background-color:#0CF;
margin:2px 2px;
padding:6px 6px 10px;
text-decoration:none;
font-size:1.25em;
display:block;
float:left;
}
#menu_item a:hover {
background-color:red;
}
#menu_item ul {
display:none;
}
#menu_item ul {
display:none;
float:right;
}
#menu_item:hover > ul {
display:block;
position:absolute;
clear:both;
float:none;
top:40px;
margin-top:0px;
//width:100%;
background-color:#F0F0F0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
padding:5px;
}
#menu_sub_item {
position:relative;
float:none;
}
.menu #menu_sub_header a{
background-color:#999;
}
Well i have done it for u in a simpler and a bit responsive way
Here goes the HTML please do tweak it based on your needs
<nav>
<ul class="cf">
<li>Home</li>
<li><a class="dropdown" href="#">Mucicians</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
<li><a class="dropdown" href="#">Songs</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
<li><a class="dropdown" href="#">Concerts</a>
<ul>
<li class = "more">Barakados</li>
<li class = "more">FaceRadiation</li>
<li class = "more">kolto101</li>
<li class = "more">OmegaDeltaZD</li>
</ul>
</li>
</ul>
</nav>
And the CSS to make the magic happen
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
Do add in the styles you need .. Check here DEMO
Your issue is with the relative containing item. You put it as "inline" and this won't let the absolute positioned stuff be relative to it. Change it to "inline-block".
.menu #menu_item {
list-style:none;
display:inline-block;