I am fairly new to Javascript, when it comes to web development. I am using a bootstrap to build a navbar. My navbar looks fine when it is expanded but when it collapses, the design messes up. My code looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
SignUp
Login
<img id="cart-icon" src="" alt="cart">
<p id="cart-total">0</p>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
My custom style sheet main.css has the following code
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
When the navbar collapses my login, signup buttons appear in a single line inside collapsed navbar menu but I want them to be shown as seperate navbar links just like the Home link and loose the btn class. I have tried writing the following js script, but it does not produce the desired effect.
var toggleButton = document.getElementsByClassName("navbar-toggler");
toggleButton[0].addEventListener("click", () => {
var buttons = document.getElementsByClassName("change-style");
for (i = 0; i < buttons.length; i++) {
buttons[i].className = "nav-link";
}
});
Can someone please help?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
SignUp
Login
<img id="cart-icon" src="" alt="cart">
<p id="cart-total">0</p>
</div>
</div>
</nav>
For CSS
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
#media only screen and (max-width: 600px){
.btn{
display: block;
margin-bottom: 1rem;
float: left;
}
.form-inline{
flex-direction: column;
align-items: flex-start;
}
}
I Hope this will be your desire effect. I know that My answer is not 100% perfect generally because what I am doing now is changing the BOOTSTRAP STYLE
This is a big no when its come to ui.
What you are doing now is you want to make a navbar by using the help of bootstrap.Using bootstrap will make it easy to create a naybar but Hard to style according to your need.
What I recommend is learn more about basic CSS and javascript then try again.
AND Your javascript code syntax is incorrect.
you have to make sure that your styling is being responsive, and you can set a bunch of extra styling for your classes or tag once it reaches specific height and width.
Related
I am having an issue with my bootstrap hamburger menu. When I click on the menu, it opens to display the links within, but when I click on it again or click anyway on the screen, it doesn't close the menu and I can't see what's causing this to break.
Is there a way to fix it? Even including some javascript or jquery as a workaround to toggle close or opening will help.
Below is the code:
<link rel="stylesheet" href="/../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/../#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
style.css
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
When I took your code into my own computer and examined it, I saw it was working. But the problem is that I prefer to keep bootstrap codes between body tags. Your problem may be caused by this. Choose body labels instead of Head labels. Also check your bootstrap links. May be incorrect.
!! İmportant:
There may be another problem. If you are using media query on your site, please check media query in the section where the navbar is responsive. A styling in that section may have produced incorrect results!!
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Website Design</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
>
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/../#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The problem is your html structure, there are many html tags, body tags and head sections misplaced. I removed some to test and at some point the menu worked, but of course the correct solution is to clean and order the entire structure.
i'm just learning about front end. i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page. so this is what i've done:
function openNav() {
document.getElementById("navbarSupportedContent").style.height = "100%";
}
function closeNav() {
document.getElementById("navbarSupportedContent").style.height = "0%";
}
#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again. does anyone can help me ?
thanks in advance !
This is happening because you are mixing up Bootstrap core functions and your customs.
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.
Add this line of CSS:
#media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.
And then remove all the collapse-related class from your HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm having weird problems with my mobile drop down menu. When you click the toggle button the menu appears briefly scrolling just below the button then moves to its proper location.
It also doesn't always run, sometimes clicking it has no effect.
You can see it in action by looking at the mobile version of this page (its the menu activated by the hamburger icon in the top right hand corner):
http://u1f8aki.nixweb23.dandomain.dk
And here is the code that creates the menu:
<div class="mobilenav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="primary-menu"><?php esc_html_e( '', 'mentordanmark' ); ?>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div id="navbar" class="navbar-collapse collapse">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu-nav',
'container_class' => 'mobileDropdownmenu',
'menu_id' => ' ',
) );
?>
</div>
<div id="blivMentorMenu" class="BlivMentor-Login-Menu" style="display: none">
<?php wp_nav_menu(
'menu=secondary-menu&after=<li class="menu-divider">|</li>'
); ?>
</div>
and the CSS:
/* To get the menu to appear */
button.navbar-toggle.collapsed {
display: flex;
flex-direction: column;
}
button.navbar-toggle {
display: flex;
flex-direction: column;
margin-left: 2em;
}
.mobilenav {
display: flex;
align-items: center;
justify-content: space-between;
height: 5.7em;
width: 100%;
}
#primary-menu-nav {
width: 100%;
position: absolute;
left: 0;
top: 5.7em;
border-bottom: 1px solid #e0e4ea;
padding-top: 4em;
}
#primary-menu-nav a {
margin: 0;
padding: 1em;
min-width: 15em;
text-align: center;
}
button.menu-toggle {
border: 0;
font-size: 20px;
width: 1em;
height: 1em;
position: absolute;
top: 1.4em;
overflow: hidden !important;
}
button.menu-toggle:active, button.menu-toggle:focus, a.btn-navbar:active, a.btn-navbar:focus {
border: 0 !important;
outline: 0;
}
a.btn-navbar {
display: flex;
position: absolute;
top: 2.5em;
height: 3em;
width: 3em;
padding: .3em 0;
flex-direction: column;
}
span.icon-bar {
background: #000;
height: .3em;
width: 100%;
margin: .2em;
}
You need to use Bootstrap 4 code if you want to use Bootstrap 4 css.
Bootstrap 3 code is incompatible with Bootstrap 4 css.
Here's what a basic Bootstrap 4 navbar looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I have a reasonably basic bootstrap navbar as seen in code below.
The pieces I care about here are the logo unified_brand.png and the Contact link. I would like to somehow line up the bottoms of the brand image and Contact text link.
Is it possible to do it programmatically? I've been messing pixels with the padding and margins and it did the trick but it feels like there should be a better answer?
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.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" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
Small trick, works like charm, place an inline-block before the element you want to align with. For this to work, the parent tag must have a define height.
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
.small-trick{
width: 0 ;
height: 100%;
display: inline-block;
vertical-align: bottom;;
}
.navbar-header{
height: 37pt;
}
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: auto;
padding: 0;
vertical-align: bottom;
}
}
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="small-trick" ></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</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="dropdown">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/