Hi I am working on designing navigation bar. I want to keep application name in left side and logo in right side. Before to logo I want to keep one drop-down. I tried as below.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0,0,0,.9);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
</head>
<body>
<div class="navbar" >
<div class="navbar navbar-light" style="backgroundColor:#483D8B">
<a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="navbar-brand navbar-right" href="#">
<img alt="CompanyLogo" src={profilePageImage} />
</a>
</div>
</div>
</body>
</html>
I am not able to design it in the way I want. Always project name, dropdown and logo comes one after the other but I want dropdown and logo in full right side. Can someone help me to figure it out. thanks
I hope this is what u r expecting:
Create a new div(right side content) and wrap the dropdown div and company logo into that div.
Then add flex and space-between property to the navbar div.
.navbar {
overflow: hidden;
width: 100%;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.right-side-content {
display: flex;
align-items: center;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" </head>
<body>
<div class="navbar">
<div class="navbar navbar-light" style="backgroundColor:#483D8B">
<a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>
<div class="right-side-content">
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="navbar-brand navbar-right" href="#">
<img alt="CompanyLogo" src="https://dummyimage.com/40x40/fff/000?text=logo" />
</a>
</div>
</div>
</div>
</body>
</html>
Change float: left; to float: right;
Change float: left; to float: right; in the css class .dropdown;
.dropdown {
float: right;
overflow: hidden;
}
Add float: right; in the css class .navbar-light .navbar-brand;
.navbar-light .navbar-brand {
float: right;
color: rgba(0,0,0,.9);
}
Try this out.
#media only screen and (max-width: 768px) {
.logo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App Name</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 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="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
<div class="logo" >
<img class="hidden-xs" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</div>
</nav>
<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>
</body>
</html>
Related
I have a navigation bar at top of the page. On the right side of it, I have a navigation item list, which are list items. This ul is inside of a div item.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-md">
<div id="navbarNav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="material-icons">
restaurant_menu
</span><br class="d-none d-md-block"> Menu</a>
</li>
<li>
<a href="#">
<span class="material-icons">
info
</span><br class="d-none d-md-block"> About</a>
</li>
<li>
<a href="#">
<span class="material-icons">
emoji_events
</span><br class="d-none d-md-block"> Awards</a>
</li>
<li id="phone" class="d-none d-md-block">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Problem is, this div has a large space at the right side, as seen in picture. This causes the telephone number to go up when screen width expands. I want this list item to aligned right, so nothing would change when screen expanded.
I'm using Bootstrap 4. I have looked everything about flex but nothing worked out. By the way, I am trying to create a responsive navigation menu which will collapse according to screen size. That's why I am using this classes.
I want this items as in image 1 in every condition.(Telephone number is below others)
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #f6b319;
/*position: relative;*/
}
#logo-img{
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
a.navbar-brand {
padding-top: 25px;
font-family: 'Lora', serif;
color: #557c3e;
font-weight: bold;
font-size: 1.5em;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand a:focus, .navbar-brand a:hover{
text-decoration: none;
}
p.kosher {
text-transform: uppercase;
margin-top: 10px;
color: #000;
font-size: .7em;
}
p.kosher span{
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
}
#nav-list > li {
margin-right: 15px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a span {
font-size: 1.8em;
}
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}
button.navbar-toggler{
clear: both;
margin-top: -70px;
margin-right: 0px;
}
li > a:hover, li > a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width: 220px;
}
#nav-list li:last-child {
width:100%;
margin-right:0px;
}
So first of, we have to add a max-width to the #navbarNav:
#navbarNav{
max-width:220px;
}
Then, to the #nav-list, we add this code:
#nav-list {
margin-top: 10px;
display:flex;
justify-content:space-between;
}
Now, you want to align the #navbarNav to the right. There are several ways we can do that. First of is with flexbox. If you want to go with this step, you have to add the following code to the parent of the #navbarNav. Which is the #header-nav:
#header-nav{
display:flex;
justify-content:flex-end;
}
However, this makes sure that everything in your #header-nav, is being aligned to the right. So if you are not adding anything else in the #header-nav, you can easily use this code.
IssueTo make my website responsive for mobile layout, I am trying to make the navigation menu appear on clicking the menu button. However, the click is not working and navigation options are not appearing at all. Only the navigation menu icon is appearing. The options are appearing below the menu button separately. However, I want them to appear on clicking the menu icon.
.navbar {
width: 100;
text-align: center;
height: 20px;
padding: 35px;
font-size: 10px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 18px;
text-align: center;
padding: 12px 16px;
text-decoration: none;
color: #0069BD;
font-family: Helvetica;
}
.navbar .current{
border-bottom: 3px solid #0069BD; /* Showing the border under the navigation option on hover */
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: Helvetica;
margin: 0;
color: #0069BD;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 3px solid #00A0EF;
}
.navbar a {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0069BD;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 10px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 17px;
}
.dropdown-content a:hover {
border-bottom: 3px solid #00A0EF;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.show {
display: block;
}
.active {
color: white;
}
.content p{
font-size: 13px;
color: #4e5153;
font-weight: normal;
font-family: 'Arial' sans-serif;
line-height: 20px;
display:inline-block;
}
/* Header Logo */
header div.logo {
padding-top: 14px;
padding-right: 24px;
float: left;
border: red;
}
header div.logo a {
width: 216px;
height: 74px;
float: left;
text-indent: -999em;
}
div.page {
min-height: 400px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
<html><!-- head --><head profile="http://www.w3.org/2005/10/profile"> <!-- image displayed on the tab alongwith the title-->
<link rel="icon" type="image/png" href="images/logo.jpg"> <!-- image displayed on the tab alongwith the title-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- encoding scheme-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!--title of the tab-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--icons used in footer-->
<link rel="stylesheet" href="style.css"> <!--stylesheet Linking-->
<script src="jquery.min.js"></script> <!-- javascript used for slider animation-->
<script type="text/javascript" src="slider.js"></script> <!-- javascript used for slider animation-->
</head>
<!-- Body-->
<body>
<div class="page-wrap">
<!--- Header section -->
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" style="height: auto;">
</div>
<!--–– Navigation Bar -->
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Design
Consulting
R&D
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Steam Turbine Design Package
Gas Turbine Design Tools
Power Plant Monitoring
Prognostic System
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
ORC Turbine
Gas Turbine
Saturated Team Turbine
</div>
</div>
About
Contact
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<img src="images/english.png" style="height: auto;"> English
<img src="images/chinese.png" style="height: auto;"> Chinese <!--- Mention the name of chinese page in place of hash.-->
</div>
</div>
</div>
</div>
</header></div>
<div class="mobilenavbtn">
<div class="content">
<img src="images/mobilenavbtn.png" alt="Menu" style="height: auto;">
</div>
</div>
</body>
</html>
Step 1) Create HTML:
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
Step 2) Create CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
I am trying to make it so the image is right behind the navbar, where the navbar is on top of the image, although the image must start from the top of the page just like the nav bar, and I don't know why it's showing this white line in between them.
This is an angular 6 website (not that it really matters in this case), I am using bootstrap. (I know this is not very angularish to do putting all this code in one style sheet, I am just fuzzing with it so then I can refactor).
I tried to fuzz with positioning and z-index and margin, but nothing works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor02"
aria-controls="navbarColor02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="text"
placeholder="Search"
/>
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- -->
<!-- main app root -->
<app-root></app-root>
<!-- -->
<!-- Dependencies -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<!-- -->
</body>
</html>
And the stylesheet:
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
There's a few problems with your code. First, you are importing Bootstrap3 in your link tag and your script tags, but you are using Bootstrap4 syntax. This is causing very little of your CSS to actually render properly.
Bootstrap3 was known to have issues with margin-collapsing, which you can read more about at MDN or CSS-Tricks. For the most part, Bootstrap4 solved most of these issues. I've changed your dependencies to the Bootstrap4 dependencies and added an orange div to show you how it looks without the collapsing margins.
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<div style="background-color: orange; width: 100%; height: 500px;">
</div>
<!-- -->
<!-- Dependencies -->
<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>
<!-- -->
</body>
</html>
Remover margin-bottom:0px;
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
}
I am new to stack-overflow so hope I am posting this question right. I have attached a screenshot of my problem with the aligning.
I am trying to achieve for the writing in the nav bar to align properly so it is straight and doesn't look out of line if you understand what i am trying to say?
i have tried adjust the margin and the padding several times and still no luck so I am unsure what I am doing wrong.
Any suggestions would be great and will be very appreciated.
Picture of page
* {
margin: 0px;
padding: 0px;
}
html {
min-height: 100vh;
}
body {
font-family: 'Staatliches', cursive;
background-image: url(images/trees.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 1920px 700px;
}
img {
float: left;
padding-bottom: 7px;
}
span {
padding: 20px;
}
a {
text-decoration: none;
color: #fff;
}
.nav {
background-color: #100D0E;
padding: 15px;
text-align: right;
overflow: hidden;
padding-bottom: 15px;
}
#matty {
font-size: 18px;
float: left;
padding-left: 5px;
padding-bottom: 3px;
}
span:hover {
border-bottom: 4px solid #fff;
}
label {
color: #fff;
margin: 0 40px 0 0;
font-size: 30px;
display: none;
}
#toggle {
display: none;
}
#media screen and (max-width: 723px) {
label {
display: block;
cursor: pointer;
}
body {
background-image: url(images/grey.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 1920px 700px;
}
img {
padding-top: 10px;
}
.nav {
text-align: right;
}
#matty {
padding-top: 13px;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
span:hover {
display: block;
}
.menu a {
display: block;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Basic | HTML | CSS</title>
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="nav">
<img src="images/legohead.png" width="25px" height="25px">
<a id="matty" href="index.html">Matty</a>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<span>Services</span>
<span>Store</span>
<span>Work</span>
<span>Gallery</span>
<span>Team</span>
<span>Contact</span>
<span>Pricing</span>
</div>
</div>
</body>
</html>
If you are trying to get the text of the menu items to be to the left of the screen, remove text-align:right; from your nav class
If you use bootstrap, you can do something like the following:
<div class="navbar navbar-inverse 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>
<a class="navbar-brand">Index Page</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
</div>
</div>
Im assuming you want to vertically align your menu items to the center? I like to use flexbox, but not sure if that is what you need in this particular case. Anyway, you can add flexbox to the nav class like this.
.nav{
display: flex;
align-items: center;
}
When I resize my browser, the logo keeps moving or snapping around. I want to pin it with a margin of 15px to the left until it reaches the 768px media query (because i set my logo to snap tocenter when in that breakpoint). How do I do this? Below is my code.
body {
background-color: #222;
}
.navbar {
min-height: 56px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
.navbar-default {
background-color: #333;
border-color: #333;
-webkit-box-shadow: 0 1px 10px 0px black;
box-shadow: 0 1px 10px 0px black;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #999;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-brand {
max-width: 100%;
height: auto;
padding: 0;
margin-top: 15px;
margin-right: 15px;
}
#media (max-width: 767px) {
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 15px;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a {
color: #d2d2d2;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Buffing Your Gaming Experience">
<meta name="author" content="Raphola">
<link rel="icon" href="">
<title>Primera Games</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="index.html">
<img alt="Logo" src="logo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
remove left:50% here "#media (max-width: 767px) {
.navbar-brand{ }
if you want margin more on left side of logo use the left style property.
body {
background-color: #222;
}
.navbar {
min-height: 56px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
.navbar-default {
background-color: #333;
border-color: #333;
-webkit-box-shadow: 0 1px 10px 0px black;
box-shadow: 0 1px 10px 0px black;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #999;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-brand {
max-width: 100%;
height: auto;
padding: 0;
margin-top: 15px;
margin-right: 15px;
}
#media (max-width: 767px) {
.navbar-brand {
position: absolute;
}
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 15px;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a {
color: #d2d2d2;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Buffing Your Gaming Experience">
<meta name="author" content="Raphola">
<link rel="icon" href="">
<title>Primera Games</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="index.html">
<img alt="Logo" src="logo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Remove the left left: 50%; from your media queries in .navbar-brand
So it should be..
#media (max-width: 767px) {
.navbar-brand {
position: absolute;
}
}
You can remove the position absolute or you can over ride the media query by changing the left property
#media(max-width: 767px){
left:10%
}