I believe what is happening is the image is getting shrinked until it disappears, and I want to keep it the same size even on mobile, and also leveled to the rest of the nav li/hamburger
<!DOCTYPE html>
<head>
</head>
<body>
<style>
/* --- header -- */
.navbar-header div.logo {
margin-top: -1%;
padding-bottom: 0;
}
.navbar-header div.logo a.navbar-brand {
padding: 0;
}
.navbar-header div.logo a.navbar-brand img {
width: 6%;
padding: 15px;
}
navbar-nav .navbar-brand {
display: flex;
align-items: center;
}
.navbar-nav .navbar-brand>img {
padding: 7px 14px;
}
/****override navbar height********/
.navbar-nav > li > a {
padding-top: 4px !important;
padding-bottom: 2px !important;
}
.navbar {
min-height: 5px !important
}
/*********************************/
header .navbar {
margin-bottom: 0;
}
.navbar-default {
border: none;
}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
header .navbar-default {
background-color: transparent;
}
header .navbar {
min-height: 32px;
}
header .navbar-nav > li {
padding-bottom: 5px;
padding-top: 5px;
}
header .navbar-nav > li > a {
padding-bottom: 5px;
padding-top: 5px;
margin-left: 2px;
line-height: 30px;
font-weight: 700;
}
</style>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<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>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logo.png"></a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>about us</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
</header>
<div>content</div>
</body>
Does anyone know how to keep the logo from disappearing, moving or resizing, while keeping the rest of the website elements responsive?
It's because you have set your image to a size in %, you will have to change it to a set size. This:
.navbar-header div.logo a.navbar-brand img {
width: 6%;
padding: 15px;
}
should be something like this:
.navbar-header div.logo a.navbar-brand img {
width: 200px;
padding: 15px;
}
Related
i'm trying to change the width of my navbar which is fixed and also has a navbar-collapse property that i want to keep when screen size changes.
I also added in the Bootstrap i am using for this page, so at the moment with the code below, the navbar is fixed but is full width, it collapses when you change to mobile site, so the only thing i want is to change the width from full width so that there is atleast 30% open space on either side of the navbar so it will be centred to the page.
and also adding a logo/image to the navbar only when its collapsed
Hope you can help me!
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }
.navbar{
background-color:white;
font-family: Amatic SC;
border:none;
font-size: 25px;
letter-spacing: 1px;
text-align:center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin,
color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3" >
<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>
<div class="navbar-collapse collapse" style="text-align:center" >
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details</li>
<li id="scrollDirections">Directions</li>
<li id="navRsvp">RSVP</li>
<li id="scrollBucket">Bucket List</li>
<li id="scrollAccommodation">Accommodation</li>
</ul>
</div>
</nav>
</body>
</html>
You have to modify the width and centrally align your code in the media queries for the expected behaviour in mobile view.
You have to add the following css:
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
}
Refer code:
.navbar-nav.nav-justified > li {
float: none;
}
.navbar {
background-color: white;
font-family: Amatic SC;
border: none;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
<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>
<div class="navbar-collapse collapse" style="text-align:center">
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details
</li>
<li id="scrollDirections">Directions
</li>
<li id="navRsvp">RSVP
</li>
<li id="scrollBucket">Bucket List
</li>
<li id="scrollAccommodation">Accommodation
</li>
</ul>
</div>
</nav>
I have a top bar with a button and a navbar, for z-index reason I can only get the button working but the menu hided under the top bar or I get both but the button not clickable:
PS: I get this problem only on small display with the burger menu,
For the small device, Bootstrap uses this:
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
If I override Z-index:1030; the bergur menu is hided under my headercss bar.
Here is my almost whole CSS, maybe some parts are not important for my problem:
HTML:
<div class="headercss navbar-fixed-top">
<div class="element"> <a class="btn btn-warning" href="www.test.com">Internet ></a></div>
</div>
<div class="sidebar-nav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">
<ul class="nav navbar-nav">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.headercss {
width: 100%;
height: 62px;
display:block;
overflow:auto;
background-color: #CAD722;
top: -1px;
left: 0px;
position: fixed;
z-index: 100;
}
}
.btn {
font-size: 18px;
font-weight: bold;
}
/* make sidebar nav vertical */
.navbar-default .navbar-nav>li>a {
font-weight: bold;
}
#media (min-width: 768px) {
.navbar-default{
width: 200px;;
height: 100%;
background-color: #e6dfd7;
z-index: 0;
}
.sidebar-nav .navbar .navbar-collapse {
margin-top: 65px;
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
font-size: 16px;
}
.sidebar-nav .navbar li a:hover {
background-color: #CAD722;
}
}
/*fixing bootstrap*/
.col-sm-10 {
width: 100%;
float: right;
}
#media (min-width: 768px){
.col-sm-10 {
width: 85%;
}
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
border-color:#CAD722;
}
.content{
position: relative;
}
.navbar-toggle {
margin-top: 11px;
margin-bottom: 1px;
margin-left: 5px;
float: left;
}
/*For small display*/
#media (max-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.sidebar-nav .navbar li{
background-color: #CAD722;
}
}
The issue is that you essentially have two full-width navbars sitting on top of each other, with one button in each. Clearly, you'll only be able to click on the top one. One solution is to add width: 50%; to .navbar-default and width: 200%; to .navbar-collapse in the small display; This causes the navbar with the menu button to only cover half of the screen, allowing you to click on the Internet button, while the collapsible menu remains full-width.
I have a bootstrap navbar that overflows on mobile, when I set my css to hide the overflow, the button links break. I am at a total loss. Here is my navbar code. Here is a link to the site. I would love if anyone has the opportunity to help thanks.
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button id="btnCollapse" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="navbar-brand">Goode Development</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a class="a" href="#homey">Home</a></li>
<li><a class="a" href="#porty">Portfolio</a></li>
<li><a class="a" href="#abouty">About</a></li>
<li><a class="a" href="#conty">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS
.navbar {
height: 125px;
background-color:#0d0d0d !important;
}
.navbar-brand {
position: relative!important;
left: 45px!important;
bottom: 10px!important;
font-size: 4em!important;
color: white!important;
font-family: "Montserrat", sans-serif !important;
white-space:nowrap;
}
.nav.navbar-nav.navbar-left li a {
color: white;
position: relative;
right: 475px;
top: 66px;
font-family: "Montserrat", sans-serif !important;
}
.nav.navbar-nav.navbar-left li a:hover {
color: orange;
}
#myNavbar {
background-color: #0d0d0d ;
}
#media screen and (max-width: 990px) {
.navbar-header {
float: none !important;
}
.navbar-brand {
left: 0 !important;
}
.nav li a {
padding: 5px;
margin-right: 50px;
}
.nav.navbar-nav.navbar-left li a {
color: white;
right: 0px;
top: 0px;
}
}
#media screen and (max-width: 767px) {
.navbar-brand {
font-size: 40px !important;
position: relative !important;
top: -20px !important;
left: -10px !important;
}
.navbar {
height: 70px;
}
.nav.navbar-nav.navbar-left li a {
color: #0d0d0d;
right: 0;
top: 0;
}
.navbar-collapse{
overflow-x:hidden;
}
.collapsing,
.in {
background-color: #222222;
position: relative;
top: -30px;
}
.collapsing ul li a,
.in ul li a {
color: white!important;
}
.collapsing ul li a:hover,
.in ul li a:hover {
color: orange!important;
}
}
You need to adjust you're viewport meta tag for flawless responsive display.
You're currently having:
<meta name="viewport" content="width=device-width, initial-scale=1">
Adding of minimum, maximum scale, and the user scalability to the meta tag will fix your problem.
Try this:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" />
I'm sorry for asking this question, but I've search through stack overflow for weeks and haven't been able to rectify my problem. My nav bar is left justified; I need it to center. I have tried applying margin: 0px auto; to every element within the hierarchy of the <nav> along with text-align: center; but nothing is centering it.
It's a Bootstrap 3 framework. Here's the code and my external CSS in addition to the bootstrap.min.css file:
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {
height: 450px
}
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
footer {
background-color: #555;
color: white;
padding: 15px;
font-family: "IM Fell DW Pica", serif;
font-size: 18px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
#banner-img {
margin: 0px auto;
}
header {
background-color: #394650;
/* background color of header */
}
nav {
font-family: "IM Fell DW Pica", serif;
/* font style of nav bar */
font-size: 23px;
/* font size of nav bar */
}
#myNavBar ul li {
text-align: center;
}
/* FOR SMALL SCREENS */
#media screen and (max-width: 767px) {
nav {
font-size: 40px;
/* changes font size on smaller screens */
}
/* sets dimensions for embedded video on small screens */
#intro-video-div {
height: auto;
width: auto;
}
section h1 {
font-size: 40px;
}
section p {
font-size: 25px;
}
}
/* FOR BIG SCREENS */
#media screen and (min-width: 768px) {
/* sets dimensions for embedded video on larger screens */
#intro-video-div {
width: 560px;
height: 315px;
}
section h1 {
font-size: 36px;
}
section p {
font-size: 20px;
}
#content-ads-holding-div {
height: 750px;
}
.img-responsive {
margin: auto;
}
}
section,
h1,
p {
font-family: "IM Fell DW Pica", serif;
text-align: center;
position: static;
}
#intro-video-div {
margin: 0px auto;
position: static;
text-align: center;
}
#intro-video {
width: 100%;
height: 100%;
}
#nav-div-center,
#nav-ul {
margin: 0px auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="navbar-container">
<div class="collapse navbar-collapse" id="myNavbar">
<div id="nav-div-center">
<ul class="nav navbar-nav" id="nav-ul">
<li class="active" id="home">Home</li>
<li id="episodes">Episodes</li>
<li id="research">Research</li>
<li id="store">Store</li>
<li id="support">Support</li>
<li id="communicate">Communicate</li>
<li id="affiliations">Affiliations</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You can see the actual website at http://www.kspavia.com/bootstrap.php
try the below css to make navbar center.
#media (min-width: 768px){
.navbar-nav{
margin: 0 auto;
float: none;
display: table;
}
}
If you want to center the navigation you need to assign a width. A block level element will always expand as wide as it can.
#nav-ul {
max-width: 780px;
}
Depending on what you ultimately want to do (justify the links across the nav or center in the links in the nav) you simple have to change the display and float properties to do either.
Note: I adjusted the font size above 768px to prevent any links from overflowing on a reduced viewport.
Here are two working examples. View at FullPage.
Distributed (justified) Links Example:
.navbar.navbar-inverse {
margin-bottom: 0;
font-family: "IM Fell DW Pica", serif;
font-size: 22px;
}
/*Distributed Links Starts*/
#media (min-width: 768px) {
.navbar.navbar-inverse .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-inverse .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-inverse .navbar-nav > li > a {
text-align: center;
}
.navbar.navbar-inverse > .container-fluid {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
}
/*Distributed Links Ends*/
#media screen and (max-width: 767px) {
.navbar.navbar-inverse .navbar-nav > li > a {
font-size: 40px;
padding: 20px 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="home">Home
</li>
<li id="episodes">Episodes
</li>
<li id="research">Research
</li>
<li id="store">Store
</li>
<li id="support">Support
</li>
<li id="communicate">Communicate
</li>
<li id="affiliations">Affiliations
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Center Links Example:
.navbar.navbar-inverse {
margin-bottom: 0;
font-family: "IM Fell DW Pica", serif;
font-size: 18px;
}
/*Centered Links Starts*/
#media (min-width: 768px) {
.navbar.navbar-inverse .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-inverse .navbar-nav > li {
display: inline-block;
float: none;
}
}
/*Centered Links Ends*/
#media screen and (max-width: 767px) {
.navbar.navbar-inverse .navbar-nav > li > a {
font-size: 40px;
padding: 20px 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="home">Home
</li>
<li id="episodes">Episodes
</li>
<li id="research">Research
</li>
<li id="store">Store
</li>
<li id="support">Support
</li>
<li id="communicate">Communicate
</li>
<li id="affiliations">Affiliations
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
if you want to make your navigation center aligned. Just update your existing css second-bootstrap-stylesheet.css line no 119 as per below css:-
#nav-div-center, #nav-ul {
width: 78%;
float: none;
}
You can just use .container instead of .container-fluid if you want .navbar block to be on center or use apply styles:
#media (min-width: 768px){
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float: none;
}
}
I am trying to change the background color and Text Color of the navigation bar links on hover however I cannot get it to work. No matter what I do there doesnt seem to be any effect.
I have never had a problem when using Pure CSS, but its just mostly with Bootstrap I'm having this problem
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div class="navbar-header">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 40px;
padding-right: 40px;
}
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}
#media screen and (max-width: 700px) {
.navbar-nav{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
margin-top: 10px;
}
.container img {
height:50px;
display: inline-block;
margin-top: -15px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar > .container {
text-align: center;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
You html code shows navbar-static-top
<div class="navbar navbar-inverse navbar-static-top"></div>
and in your css you are using .navbar-fixed-top
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
Updated fiddle https://jsfiddle.net/3ge0b6nr/1/
Change your code to
.navbar.navbar-inverse.navbar-static-top li > a:hover {
color: cyan;
}
Here is a Sample jsFiddle based on your code.
Just add this css code to your css :
.navbar-inverse .navbar-nav > li > a {
color: red;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:active,
.navbar-inverse .navbar-nav > li > a:focus{
color: green;
background-color: red;
}
Just change it to which color you want.