I have started developing a website using bootstrap and it is responsive but only to some extend.
If i minimize the browser, the contents auto-arrange itself but as i keep on minimizing at some point the h1 & p contents stop being responsive.`
<html lang="en">
<head>
<title>NiKuLsAn DeSiGn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.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"></script>
<style>
body {
background-color: black;
}
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
.imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
.imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="imageAndText">
<img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
<div class="col">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col3">
<img src="logo.jpg" alt="logo" />
</div>
<div class="col2">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
</div>
</div>
</div>
</div>
</body>
Please help as I am not able to understand what is going wrong.
I have created an example where I have used minimal custom CSS and everything else is wprking using bootstrap framework.. Have a look and ask your queries.
body {
background: url('http://placehold.it/1920x400') no-repeat center center;
background-size: cover;
/* Workaround for some mobile browsers */
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #000;
}
.featurette-divider {
margin: 20px 0;
border: none;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">
<div class="container">
<nav class="navbar navbar-inverse 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="#">Logo Goes here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="featurette-divider">
<div class="container ">
<div class="col-sm-12">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b>
<br>A professional skier and a musician.</p>
</div>
</div>
Related
I'm trying to align sub-menus below all parent menus and align with the left parent menu.
Please NOTE I don't want to align the submenus below the parent, I want to align the sub menus below the paint menu
I'm currently unable to achieve what I require even with position absolute and transform
My code (css/html) is below:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
#media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
#media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
#media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-last">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The issue I am having can be seen in the image attached, all sub menus should align with the paint parent menu
Any help would be appreciated
Working Gif since you said its not working..:
Here you go: https://jsfiddle.net/h4ynogLe/
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
#media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
#media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
#media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
#media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-4">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -150px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -303px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Explanation: I just adjusted the margins as they can be negative. I also removed your last transform class.
Thank you for the reply, I tried your code, but for me, it still did not work as the image below shows.
I finally got it to work yesterday via jQuery, the code I used is below.
$(".nav-link").on("mouseover",function(){
var leftAlign = $("#main-div").offset();
var i;
for(i = 1; i < 7; i++)
{
$(".sub-container-" + i).css("position", "fixed");
$(".sub-container-" + i).css("left", + Math.floor(leftAlign.left) +"px" );
$(".sub-container-" + i).css("width", "600px");
}
CSS used to set the top alignment
#media (min-width: 768px) {
.sub-container-top {
position: absolute;
top: 362px;
}
}
#media (min-width: 992px) {
.sub-container-top {
position: absolute;
top: 262px;
}
}
The code I used produced the desired effect
let say in my large screen my list items got pull right or pull left coded like this :
<header id="main-header">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand hidden-xs hidden-sm">
logo
</a>
</div>
<button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Recommendation</li>
<li>Best Seller</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</header>
css :
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 1400px;
font-family: sans-serif;
font-size: 1em;
line-height: 1.2em;
padding: 0;
}
/*=======================
H E A D E R
========================*/
#main-header {
width: 100%;
height: 250px;
position: relative;
}
/* main navbar */
.navbar.navbar-default {
position: absolute;
width: 100%;
margin : 0;
bottom: 0;
}
.navbar-header {
position: relative;
left: 50%;
}
/*=======================
M E D I A Q U E R I E S
========================*/
#media screen and (max-width: 991px) {
}
#media screen and (max-width: 767px) {
.navbar-toggle {
display: block;
margin-right: 250px;
}
}
All is working well in large screens like desktop. but when i switch to mobile screens (767px) when i click the bars button the list are going everywhere image. how can i solve this problem ? thanks.
Use navbar-right instead of pull-right.
Working example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header id="main-header">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand hidden-xs hidden-sm">
logo
</a>
</div>
<button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Recommendation</li>
<li>Best Seller</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</body>
</html>
</body>
</html>
Stop using the pull-right class and just use a media query to float the list right on mobile only
So:
<ul class="nav navbar-nav">
<li>Home</li>
<li>Recommendation</li>
<li>Best Seller</li>
</ul>
<ul class="nav navbar-nav rightNav">
<li>About Us</li>
<li>Contact Us</li>
</ul>
with
.rightNav {float: right}
#media only screen and (min-width : 768px) {
float: none;
}
I have a problem in my css. I want to make my navbar like this ( as you can see, it has no background on navbar and it joins with slider ). I have tried every advice in youtube tutorials but nothing worked.
Here's the link I want to show you:
http://theme.ridianur.com/alamak/
I was able to change the color background of my navbar by opening bootstrap.min.css in notepad, search for "navbar-default", and change the color code. But, I wasn't able to make it no background like I want to.
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="boot/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Image Slider</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>NEWS</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
<div class="logo">
<img src="kets.png">
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="Cats1">
<div class="carousel-caption">
<div class="tekslide1">
<h1>Hewan yang mainstream</h1>
<p>Kita juga gatau kenapa milih topik kucing</p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Cats2">
</div>
<div class="item">
<img src="img/3.jpg" alt="Cats3">
</div>
<div class="item">
<img src="img/4.jpg" alt="Cats4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
and my css :
#charset "utf-8";
#font-face{
font-family: 'custom';
src: url('OpenSans-Regular.ttf') format('truetype'); //<-- semicolon
}
#font-face{
font-family: 'custom1';
src: url('Alternate.ttf') format('truetype'); //<-- semicolon
}
#media (min-width: 768px){
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: top;
font-family: 'custom';
letter-spacing: 5px;
padding-top: 12px;
margin-bottom: -20px;
}
.tekslide1{
font-size: 25px;
padding-left: 300px;
padding-bottom: 500px;
font-family: 'custom1';
}
.navbar .navbar-collapse{
text-align: right;
padding-right: 120px;
}
.navbar-default .navbar-collapse .nav >li >a {
color: #EEEEEE;
margin-left: 10px;
margin-right: 5px;
font-size: 13px;
}
.navbar-default .navbar-collapse .nav >li >a:hover, .navbar-default .navbar-collapse .nav >li >a:focus{
color: #BDBDBD;
background: none;
}
.logo{
float: left;
padding: 2px;
margin: 2px;
margin-bottom: -15px;
margin-left: 5%;
border: none;
border-radius: 100px;
}
.hero-slide{
margin-top: -20px;
}
.navbar li { color: #000 }
Any help would be appreciated. Thanks!
I'll explain this in pseudocode. If you want help you need include relevant bits of html and css in your post, not the archive of an entire site.
This effect you're looking for is nothing more than:
<div class="wrapper">
<div class="navigation">
</div>
<div class="banner">
</div>
</div>
and
.wrapper{background:url('your_image.jpg');}
.navigation, .banner{background:transparent;}
A graphic applied to a parent container and navigation / banner with transparent backgrounds.
I'm new on web design and I'm trying to use bootstrap toggle button, but it does not works when I put an image at down, I supose that the content is displaying at back of that Image.
This is the css and html, you can run code snipet to see what happens.
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
I know that something in css code is wrong, just when I'm centering the text with .blabla and .inner classes. But I need that and I dont know how to do that without killing toggle button function.
Any orientation?
Sorry for my bad english and thanks.
The reason you cant see your toggled menu is you are forcing the height of your navbar using height: 83px !important; the navigation toggle actually makes the height larger to show the hidden elements.
change the code for .mynavbar to use min-height: 83px; instead of the !important style
JSFIDDLE
You defined fixed height for .mynavbar. You need to remove that and make margin-bottom: 0 !important to remove a gap between menu and image. And to make a view as you need, you can add padding-bottom: 20px;.
Look at snippet
.mynavbar{
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px !important;
padding-bottom: 20px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
Another way, if you don't want to change height of menu, is to add z-index: -1; to .blabla class, but then you need to add background to submenu
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
background: rgb(238,238,238) !important;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
z-index: -1;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
if you meant, that the menu is not visible, add z-index to .mynavbar and make this class as relative position. Check this fiddle
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
position:relative;
z-index:1;
}
In your css change:
.inner {
Text-align: center;
Color:white;
Position: absolute;
Left: 50%;
Top: 50%;
Transform: translate(-50%, -50%);
}
To
.inner {
Text-align: center;
Color:white;
Position: absolute;
Left: 50%;
Top: 50%;
Margin-right: -50%
Transform: translate(-50%, -50%);
}
You need the margin-right to compensate for the margin left and also benefical as it makes your div responsive
I have strange problem from the mobile menu. When I want to create a version for small, medium, large device 4 columns dropdown menu.
In the menu on the Extra Small Devices <768px:
When I click Link1>TEST
He is brings me to the url located under LINK2. Why?
If a click Link3>TEST
(Aslo 4 columns menu for larger device)
Everything is OK.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test menu</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body{
background: #000000;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #ffffff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
#media(min-width:768px) {
#double li { width:25%;
float:left;
display:inline;
margin-bottom: 14px;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: 500px;
}
}
#media(max-width:767px) {
#double li { width:100%;
float:left;
display:inline;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar 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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ok I solved this problem.
The answer if someone had the same problem
#media(min-width:768px) {
#double {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
#media(max-width:767px) {
#double {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
You've given both dropdowns the same ID. Not sure why that caused the behavior you're getting but fixing those fixes the menus:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double1">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double2">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
Normally, I'd do a runnable snippet but your styles were being overwritten by the Bootstrap styles here.