At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
Related
So if you go to diartefloral.tech and use cellphone dimension in the "Sobre Nosotros" part of the menu the footer is overlapping an image, i dont know how to fix this. Thats like the most relevant code, I'm using bootstrap, i got the in the morning with the navbar overlapping the footer but i fixed it by adding the body{ padding-top:60px;}
.principal{
background-color: rgb(230,219,241);
}
.container >a{
font-family: Charmonman, serif;font-size: 35px;padding-bottom: -5px;padding-top: 9px;
}
.site-footer
{
background: linear-gradient(120deg, #7f70f5, #0ea0ff);
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color: white;
width: 100%;
position: fixed;
bottom: 0;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:white;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:white;
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:white
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:0;
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.instagram:hover
{
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}
#media (max-width: 700px){
#logo{
font-size: 20px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 500px){
#logo{
font-size: 30px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 400px){
#logo{
font-size: 25px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 350px){
#logo{
font-size: 22px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 300px){
#logo{
font-size: 18px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 250px){
#logo{
font-size: 14px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
.imagen{
padding: 30px;
display: flex;
justify-content: center;
}
.imagen >img{
margin: auto;
border-radius: 50%;
height: 120px;
padding: 20px;
}
body {
padding-top: 60px;
padding-bottom: 60px;
}
<!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.0">
<link rel="stylesheet" href="../estilos/estilos.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Charmonman&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../estilos/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>DiArteFloral</title>
</head>
<body class="principal">
<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient navbar-static-top" style="height: 86px;" id="banner">
<div class="container"><a id='logo' class="navbar-brand logo" href="#" ><i class="fa fa-pagelines"></i>DiArteFloral y Regalos</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav" id="boton"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="menu">
<li class="nav-item"><a class="nav-link active" href="../index.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="./productos.html">Productos</a></li>
<li class="nav-item"><a class="nav-link" href="./contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link" href="./sobreN.html">Sobre Nosotros</a></li>
</ul>
</div>
</div>
</nav>
</br>
<div class="imagen">
<div class="imagen">
<img src="../img/LOGO.jpg" alt="LOGO">
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>Informacion</h6>
<p class="text-justify">DiArteFloral y Regalos es una empresa enfocada en complacer a las personas brindandoles el mejor servicio y los productos mas bonitos que se puedan crear al gusto exclusivo de cada cliente.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Categorias</h6>
<ul class="footer-links">
<li>Arreglos</li>
<li>Eventos</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Atajos</h6>
<ul class="footer-links">
<li>Inicio</li>
<li>Productos</li>
<li>Contacto</li>
<li>PSobre Nosotros</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Sergio Calderon.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="instagram" href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/6a4338d571.js" crossorigin="anonymous"></script>
<script src="../estilos/bootstrap.min.js"></script>
<script src="../estilos/theme.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
let boton = document.querySelector('#boton');
let menu = document.querySelector('#banner');
let logo = document.querySelector('#logo');
boton.addEventListener('click', ()=> {
if(menu.style.height==='86px'){
menu.style.height='240px'
}else{
menu.style.height='86px'
}
});
</script>
</body>
</html>
User agents will always display items in the DOM order.
You mean customize css properties. I see you are doing great in your live site, try to use images that sizes less than 1.5Mb, it slows rendering visuals.
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.
I am relatively new to bootstrap and html/css and so far I have been getting along pretty well. What I have been trying to do is increasing the height of the navbar to 80px. My problem is that now I cannot get the content of my navbar centered, they are just too high up.
It looks like this: https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6
Thanks :)
Here is my whole CSS code:
* {
box-sizing: border-box;
}
body {
background-color:#f6f6f6;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size:cover;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0!important;
}
.navbar {
position: relative;
border:1px solid transparent;
min-height: 80px;
border-top: 0;
border-bottom:1px solid #e7e7e7;
margin-bottom:0;
z-index: 100;
}
.navbar-default {
height: 80px;
}
.navbar-brand {
float:left;
font-size:18px;
line-height:80px;
height:80px;
padding:0 15px;
}
.navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-nav > li > a {
height: 80px;
padding-top:10px;
padding-bottom:10px;
line-height:20px;
border-left: 1px solid #e7e7e7;
}
.navbar-left {
float:left!important;
}
.navbar-right {
float:right!important;
margin-right:-15px;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0;
border-top-right-radius:0;
border-top-left-radius:0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap required meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links to stylesheets and scripts -->
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Leaderboards</li>
<li>Support</li>
<li class="dropdown">
<a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Statistics</li>
<li>History</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Try adding the following flex properties inside of your .navbar-nav > li > a CSS block:
display: flex;
align-items: center;
So the .navbar-nav > li > a block should now look like this:
.navbar-nav > li > a {
display: flex;
align-items: center;
height: 80px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
border-left: 1px solid #e7e7e7;
}
CodePen Demo
I think I get the problem(may be)... use this css code...I think this is exactly what you need
.navbar.navbar-default {
min-height: 80px;
}
.container-fluid {
margin-top: 15px;
}
to change font-size change it differently for .navbar-header and .navbar-brand
I'm trying to position a DIV on top of the Bootstrap fixed navbar at the top. I've tried z-index and absolute positioning etc, but no matter what I do, the Bootstrap navbar seems to have ultimate topmost priority.
Here's the codepen: http://codepen.io/anon/pen/kkRLKA
Here's my code:
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Our Mission</li>
<li>Who We Are</li>
<li>What We Have Done</li>
<li>The State of Things</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
And the CSS:
body { position:relative; }
div#navbar > ul li
{
padding-right:5vw;
}
#media only screen and (max-width: 1230px)
{
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
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;
}
}
.LogoContainer
{
width:200px;
height:200px;
background-color:blue;
border:1px solid red;
position:absolute;
left:5%;
top:0;
z-index:1;
}
.jumbotron
{
height:70vh;
margin-bottom:0;
position:relative;
}
div.donation-form
{
border:1px solid red;
width:19%;
padding:7vh 0 5vh 0;
position:absolute;
right:5%;
bottom:-10vh;
}
div.donation-form input[type=text]
{
display:block;
width:60%;
height:50px;
margin:0 auto 8px auto;
padding-left:15px;
}
div.donation-form input[type="submit"]
{
display: block;
width:60%;
height:60px;
margin:20px auto 0 auto;
background-color: darkgray;
border:none;
}
div.donation-form p
{
font-size:1.1rem;
text-align:center;
}
As you can see, the top 1/4 of the blue box is obscured by the navbar. How do I make it overlap the navbar? I've also tried z-index:999999999 !important but it's useless.
It looks pretty weird in the snippet, but check it out on the jsfiddle. Is that what you wanted?
https://jsfiddle.net/t8j6pgg8/
body {} div#navbar > ul li {
padding-right: 5vw;
}
#media only screen and (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
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;
}
}
.LogoContainer {
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid red;
position: absolute;
left: 5%;
top: 0;
z-index: 9999;
}
.jumbotron {
height: 70vh;
margin-bottom: 0;
position: relative;
}
div.donation-form {
border: 1px solid red;
width: 19%;
padding: 7vh 0 5vh 0;
position: absolute;
right: 5%;
bottom: -10vh;
}
div.donation-form input[type=text] {
display: block;
width: 60%;
height: 50px;
margin: 0 auto 8px auto;
padding-left: 15px;
}
div.donation-form input[type="submit"] {
display: block;
width: 60%;
height: 60px;
margin: 20px auto 0 auto;
background-color: darkgray;
border: none;
}
div.donation-form p {
font-size: 1.1rem;
text-align: center;
}
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Our Mission
</li>
<li>Who We Are
</li>
<li>What We Have Done
</li>
<li>The State of Things
</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
Put div with your logo class here(3th row of code) and delete previous div with logo class of course.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="LogoContainer"></div>
<div class="container-fluid">
I made a dropdown menu with css and i wanted to activate it by hovering over menu button and it works just fine. But problem is that,when i hover below menu button dropdown menu is activated again ,and i don't want that. Here is my HTML and CSS and every help would be more than appreciate.
PS Sorry if you find some typos english is not my native language.
#charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
margin-top: 5px;
position: relative;
top: 17px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul:hover li {
opacity: 1;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>HOME
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Try this made some css changes to your code. see the overflow hidden changes.
nav ul{
list-style-type:none;
transition:all 0.3s;
max-height:50px;
overflow:hidden;
width:120px;
padding:0px;
}
nav ul li{
height:30px;
width:100px;
padding:10px;
margin-top:5px;
background:teal;
text-align:center;
cursor:pointer;
transition:all 0.3s;
}
nav ul li a{
color:white;
font-family:'segoe ui';
text-decoration:none;
}
nav ul li:hover{
background:yellowgreen;
}
nav ul li:not(:first-child){
opacity:0;
}
nav ul:hover{
max-height:600px;
}
nav ul:hover li{
opacity:1;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>