First question here, thank you for your patience.
I looked for a similar question and was surprised I didn't find one honestly.
I learned enough to create a fiddle for this as well. You can see it here
https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/
HTML
<body>
<div class="container-fluid">
<div class="row yellow container-fluid"> <!-- YELLOW NAV ROW -->
<div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
<div>
<img src="logo.jpeg" alt="logo" title="logo" width="100px" height="100px" class="my-image">
</div>
</div>
<div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
<div class="jer-margin-left">
<div class="header-title">My Bootstrap Site</div>
<div class="header-slogan">And its navbar problem...</div>
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav jer-nav">
<li class="jer-active">HOME <span class="sr-only">(current)</span></li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>FORMS</li>
<li>CONTACT US</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div> <!-- END YELLOW NAV ROW -->
</div> <!-- END CONTAINER -->
CSS
[hidden] {
display: none;
}
* {
box-sizing: border-box;
}
.yellow {
background-color: rgb(253, 232, 104);
width: 100%;
}
.my-image {
margin: 10px;
}
.jer-margin-left {
margin-left: 15px;
}
.header-title {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 30px;
margin: 20px 0 0 0;
}
.header-slogan {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 22px;
}
.no-left-margin {
margin-left: -70px;
}
.navbar-default {
background-color: rgb(253, 232, 104);
border-color: rgb(253, 232, 104);
padding-top: 20px;
}
.jer-nav {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
text-align: center;
font-family: Montserrat;
font-size: 16px;
text-transform: uppercase;
float: right;
}
.navbar-default .navbar-nav>li>a {
color: #000;
}
.navbar-default .navbar-nav>li>a:hover {
color: white;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
margin: 0;
}
.jer-active {
border: silver solid 1px;
background-color: rgb(253, 232, 104);
}
#media (max-width: 420px) {
.jer-margin-left {
margin-left: 65px;
}
}
#media (max-width: 600px) {
.header-title {
font-size: 22px;
}
.header-slogan {
font-size: 15px;
}
.jer-margin-left {
margin-left: 45px;
}
}
#media (max-width: 1200px) {
.ph-float-right {
float: none;
margin-right: 0;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Reduce the size of the output window to force the mobile menu. (instead of the horizontal text menu)
ISSUE 1: To open the mobile menu I am required to click on it twice. That is the first issue.
ISSUE 2: It will not stay open.
In setting up the fiddle I came to believe that its a css issue as when all of the css was stripped away it works as hoped. If I setup the fiddle properly, MY css is in the css window, and the stock bootstrap css is coming in through the external resources options in jsfiddle.
Thank you very much for looking.
This is telling the browser to remove it from view, you should remove it:
.navbar-collapse.collapse {
display: none!important;
}
Bootstrap uses class="collapse" and class="collapse show" on any data-toggle="collapse" element.
You have overridden the ability for class="collapse show" to display the element because you have made your style !important and also because you have matched the specificity of the bootstrap selectors by also referring to two classes in your selector.
The reason why you had to 'click twice' is because bootstrap adds another class 'collapsing' to show the transition, and when the element is 'collapse show collapsing', it is visible, but when it is only 'collapse collapsing', it is not.
After looking at the fiddler, by removing
.navbar-collapse.collapse {
display: none!important;
}
Resolves the issue.
In the css remove the above code at #media (max-width: 1200px)
I am not able to reproduce ur 1st issue.
UPDATE
I'm not sure what you removed. Here is the updated code.
[hidden] {
display: none;
}
* {
box-sizing: border-box;
}
.yellow {
background-color: rgb(253, 232, 104);
width: 100%;
}
.my-image {
margin: 10px;
}
.jer-margin-left {
margin-left: 15px;
}
.header-title {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 30px;
margin: 20px 0 0 0;
}
.header-slogan {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 22px;
}
.no-left-margin {
margin-left: -70px;
}
.navbar-default {
background-color: rgb(253, 232, 104);
border-color: rgb(253, 232, 104);
padding-top: 20px;
}
.jer-nav {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
text-align: center;
font-family: Montserrat;
font-size: 16px;
text-transform: uppercase;
float: right;
}
.navbar-default .navbar-nav>li>a {
color: #000;
}
.navbar-default .navbar-nav>li>a:hover {
color: white;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
margin: 0;
}
.jer-active {
border: silver solid 1px;
background-color: rgb(253, 232, 104);
}
#media (max-width: 420px) {
.jer-margin-left {
margin-left: 65px;
}
}
#media (max-width: 600px) {
.header-title {
font-size: 22px;
}
.header-slogan {
font-size: 15px;
}
.jer-margin-left {
margin-left: 45px;
}
}
#media (max-width: 1200px) {
.ph-float-right {
float: none;
margin-right: 0;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
just too check
do you have in your html link to bootstrap js?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I fixed this by ensuring I had the same versions of boostrap.css and bootstrap.js and also ensuring that I loaded jquery before bootstrap.js
Related
You can check webpage on http://prodenvermovers.wpupkeep.org
After I hover on Services page it wont show up dropdown menu.
The dropdown was made in wordpress via wp_nav_menu. I have 5 pages and one of them is Services page with a dropdown with 3 pages. I`m also using wp_bootstrap_navwalker
I have tried a lot of stuff. Firstly I changed some data in wp_bootstrap_navwalker
$atts['href'] = 'http://prodenvermovers.wpupkeep.org/services/';
$atts['data-hover'] = 'dropdown';
I removed absolute class from boostrap responsive and it show up but like this
Check the picture --> http://prntscr.com/oh5lzk
As you can see on this picture it pushed my logo and free estimate with dropdown.
header.php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package crosscountry
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76356877-1', 'auto');
ga('send', 'pageview');
</script>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'crosscountry' ); ?></a>
<!-- header parts -->
<header id="masterhead" class="site-header">
<div class="md-wrapper">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="country-logo" href="<?php echo site_url() ?>">
<img class="country-logo-style" src="<?php echo get_bloginfo("template_directory"); ?>/images/header/logo_pdm.png" alt="Pro Denver Movers Logo" ></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="col-md-12 col-lg-7 padding-nav-left">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu( array(
'menu' => 'header_menu_1 ',
'depth' => 3,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</div>
<div class="col-md-3 md-header-cta-class">
<a class="md-header-estimate" href="<?php echo site_url('free-estimate') ?>">Free Estimate</a>
</div>
</nav>
</div>
</div>
</div>
</header>
<div id="content" class="site-content">
md-header.css
background: transparent;
float: left;
width: 100%;
z-index: 2;
overflow: hidden;
border-bottom: 1px solid rgb(194, 194, 194);
}
header#masterhead .container {
background: transparent;
}
.site-title,
.site-description {
display: none;
}
.country-logo {
margin: 0;
}
.country-logo-style {
width: 193px;
height: 60px;
}
.menu-navigation {
margin-top: 5px;
}
/* STYLING UL ELEMENTS */
.navbar {
padding: 0 !important;
}
.navbar-nav {
color: #333333;
margin-left: 100px;
text-transform: uppercase;
margin: 0;
}
.nav-item {
padding-left: 0px;
padding-right: 0px;
font-weight: 600;
}
.site-header {
overflow: hidden;
}
a.nav-link {
padding-bottom: 25px !important;
padding-top: 25px !important;
border-bottom: 4px solid transparent;
width: 100px;
font-size: 16px;
color: #fff !important;
transition: all 0.5s ease-in;
}
.site-header .nav-link:hover {
border-bottom: 4px solid #ecf014 ;
color: rgb(235, 235, 235) !important;
}
#media screen and (max-width: 1255px) {
.nav-item {
padding-left: 10px;
}
.nav .navbar-nav li a {
font-size: 14px;
}
}
nav .navbar-nav li a:hover {
color: #0082ff !important;
}
.site-header .navbar .navbar-collapse li > a {
padding: 30px 0 !important;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 100%;
}
a.md-header-estimate {
font-size: 18px;
letter-spacing: 0px;
border-radius: 5px;
background: #b4b4b4;
opacity: 1;
font-weight: 500;
padding: 14px 42px;
color: white;
}
.md-header-cta-class {
text-align: right;
}
.fa {
position: absolute;
cursor: pointer;
transition: background 2s;
}
.fa:hover {
background: #dcf7ff;
border-radius: 5px;
}
.padding-nav-left {
padding-left: 70px;
}
.dropdown-menu a.dropdown-item {
font-size: 14px;
font-weight: bold;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nav-item .dropdown-menu li {
padding-left: 25px !important;
padding-right: 15px !important;
}
.fa-chevron-down:before {
line-height: 25px;
margin-left: 5px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin: -1px 0 0 0;
}
.wrapper .navbar .dropdown.dropdown-menu {
display: none;
margin: 0;
height: 100%;
min-width: 220px;
text-align: left;
background: #fff;
padding: 20px 0;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
color: #16345e;
position: absolute;
z-index: 99999;
}
.wrapper .navbar .dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-toggle:after {
content: "\f063";
font-size: 15px;
visibility: visible;
padding-left: 5px;
font-family: fontawesome;
}
.site-header .navbar .navbar-nav .active > a {
border-bottom: 4px solid #ecf014 ;
}
#media screen and (max-width: 1400px) {
.navbar-nav > li > a {
font-size: 14px !important;
}
a.vk-header-phone {
font-size: 16px;
}
}
#media screen and (max-width: 1650px) {
.vk-header-cta-class {
text-align: right;
}
}
#media screen and (min-width: 991px) and (max-width: 1200px) {
.site-header .navbar .navbar-collapse li {
padding-left: 0 !important;
}
.padding-nav-left {
padding-left: 20px !important;
}
}
#media screen and (max-width: 991px) {
.navbar-collapse {
padding: 0;
}
button.navbar-toggler {
float: right;
}
a.md-header-estimate {
display: none;
}
.padding-nav-left {
padding-left: 15px;
}
.site-header .navbar .navbar-collapse li a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
#media screen and (max-width: 500px) {
.country-logo-style {
width: auto;
height: auto;
}
}
Its maybe because of bootstrap classes col-md-7 and col-md-5 inside of header? I dont know.
Help guys. I need to finish this until monday for my conmpany
Remove overflow:hidden from #masterhead and from .siteheader
Remove background-clip from .dropdown-menu
Here is my codepen: https://codepen.io/anon/pen/EvVNjz
Here is the navigation part of my HTML:
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">
<img class="img-responsive" src="~/images/2040_Logo_Nav_255x160.jpg" alt="2040 Logo" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="row navRow1">
<ul class="nav navbar-nav floatRight">
<li><a class="icons" target="_blank" href="https://www.facebook.com/2040PartnersforHealth">
<img src="~/images/_Layout_Images/icon_facebook.png" class="img-responsive center-image" /></a></li>
<li><a class="icons" target="_blank" href="https://twitter.com/2040Health">
<img src="~/images/_Layout_Images/icon_twitter.png" class="img-responsive center-image" /></a></li>
<li><a class="icons" href="mailto:admin#2040partnersforhealth.org">
<img src="~/images/_Layout_Images/icon_mail.png" class="img-responsive center-image" /></a></li>
<li><a class="icons" href="tel:7202160075">
<img src="~/images/_Layout_Images/icon_phone.png" class="img-responsive center-image" /></a></li>
</ul>
</div>
<div class="row navRow2">
<ul class="nav navbar-nav floatClear">
<li><a asp-area="" asp-controller="Home" asp-action="Index">HOME</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">DATA/RESOURCES</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">COMMUNITY</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
asp-area="" asp-controller="Home" asp-action="Error">PROGRAMS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><h5>Student Programs</h5></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">CSTAHR</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Teen Obesity</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Refugee Program</a></li>
<li><h5>Current Programs</h5></li>
<li><a asp-area="" asp-controller="Programs" asp-action="CBPR">CBPR</a></li>
<li><a asp-area="" asp-controller="Programs" asp-action="Upstream">Upstream</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Healthy Sleep</a></li>
<li><h5>Past Programs</h5></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Mental Health</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Kick It Tobacco Teen</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">Asthma</a></li>
</ul>
</li>
<li><a asp-area="" asp-controller="Home" asp-action="Summit">2017 SUMMIT</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Error">ABOUT US</a></li>
</ul>
</div>
</div>
</div><!-- container end-->
</nav>
CSS
/* Screen size changes */
#media screen and (max-width: 258px) {
/* CSS for smaller logo */
.navbar {
height: 90px !important;
margin-bottom: 0px !important;
}
.navbar-brand {
width: 120px;
}
.navbar-collapse {
margin-top: 0px;
border: none !important;
}
}
#media screen and (max-width: 420px) {
/* 2017 Health Summit header text smaller */
.small-h1 {
font-size: 20px !important;
}
}
#media screen and (max-width: 550px) {
/* switch size of whats' new image header */
.whats-new-img {
display: none;
}
.whats-new-small {
display: block !important;
}
}
#media screen and (min-width: 259px) and (max-width: 767px) {
/* CSS for smaller logo */
.navbar {
height: 140px !important;
margin-bottom: 0px !important;
}
.navbar-brand {
width: 200px;
}
.navbar-collapse {
margin-top: 48px;
}
}
#media screen and (max-width:767px) {
/* Submenu headers black font */
.dropdown-menu > li > h5 {
color: black !important;
}
/* CSS for navbar collapse */
.navbar-collapse ul {
width: 100% !important;
}
.navbar-nav {
float: none !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
margin-bottom: 0px !important;
}
.navRow1 {
display: none;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: white !important;
background-color: #a09d91 !important;
border-bottom: none !important;
padding-top: 10px !important;
}
.nav > li {
background-color: #c9c5b6 !important;
}
.nav > li > a {
padding-top: 10px !important;
display: block !important;
text-align: center !important;
}
/* 2017 Health Summit header text smaller */
.small-h1 {
font-size: 28px;
}
.padTop40 {
padding-top: 0px !important;
}
/* Padding between Mission & image */
.mission-pad {
padding-top: 20px;
}
/* Don't need that much padding on phone */
.padBot80 {
padding-bottom: 20px !important;
}
/* Smaller Sept 14 image */
.smaller-sept14 {
width: 100px;
}
}
/* Submenu appears on hover */
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
/* Smaller nav items */
.nav > li > a {
font-size: 67%;
}
.navRow1 {
margin-top: 26px !important;
}
.nav > li > a {
padding-top: 11px !important;
height: 30px !important;
}
.navRow2 > ul > li > a:hover,
.navRow2 > ul > li > a:focus {
border-bottom: 3px solid #6cb645 !important;
padding-top: 11px !important;
}
/* CSS for smaller logo */
.navbar {
height: 140px !important;
margin-bottom: 0px !important;
}
.navbar-brand {
width: 200px;
}
.navbar-collapse {
margin-top: 0px;
}
}
#media screen and (min-width: 992px) {
.mission-pad {
padding-top: 15px;
}
.vision-pad {
padding-top: 30px;
}
}
#media screen and (min-width: 992px) and (max-width: 1199px) {
.nav > li > a {
font-size: 90%;
}
}
#media screen and (min-width: 1200px) {
/* nothing */
}
body {
font-family: 'Montserrat-Regular', Arial, Helvetica, sans-serif;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
margin: 0px 0px 60px 0px;
padding: 0px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
.navbar {
padding-top: 5px;
height: 180px;
background-color: white;
margin-bottom: 10px;
border: 0px !important;
}
/* NAVBAR line height is 20px by default so add 30px top and bottom
to equal the new .navbar-brand 80px height */
.nav > li > a {
color: black;
font-weight: bold;
padding-top: 0px;
padding-bottom: 0px;
height: 41px;
vertical-align: middle;
display: table-cell;
}
.navbar-toggle {
padding: 10px;
margin: 25px 15px 25px 0;
background: #c9c5b6 !important; /*Whatever colour you want for background */
}
.icon-bar {
background: white !important; /*Whatever colour you want for icon lines*/
}
.navRow2 > ul > li > a:hover,
.navRow2 > ul > li > a:focus {
background-color: white;
border-bottom: 5px solid #6cb645;
padding-top: 5px;
}
.nav > li > a.icons:hover,
.nav > li > a.icons:focus {
background-color: white; /*Change rollover cell color here*/
}
.navbar-brand {
padding-top: 10px !important;
}
.navbar-collapse {
padding-bottom: 0px !important;
}
.navRow1 {
padding-right: 6px;
margin-top: 70px;
padding-bottom: 5px;
}
footer {
color: white;
padding: 5px 15px 25px 15px;
background-color: #4c4c4c;
}
.glyphicon {
font-size: 15px;
}
footer ul {
display: inline-flex;
list-style-type: none;
margin-left: 0;
padding-left: 0px;
}
.liText {
font-size: 15px;
margin-left: 5px;
vertical-align: text-bottom;
}
footer h4 {
color: #6cb645;
padding: 10px 0 10px 10px;
}
.footCol {
padding-left: 10px;
padding-right: 10px;
}
.btn-brown {
margin-top: 10px;
color: black;
background: #c9c5b6;
}
.btn-brown:hover,
.btn-brown:focus {
color: white;
text-decoration: none;
background-color: #a09d91; /*Change rollover cell color here*/
}
.w-100 {
width: 100%;
}
.w-50 {
width: 50%;
}
.panel.panel-green {
border-radius: 0px;
border-color: #dfdfdf;
}
.panel.panel-green .panel-heading {
border-radius: 0px;
color: black;
background-color: #a7d38f;
padding-left: 25px;
}
.panel.panel-green .panel-body {
background-color: #F2F2F2;
color: #4D4D4D;
padding-left: 25px;
padding-right: 25px;
}
.resourcesButtons {
margin-bottom: 20px;
}
.icons {
display: inline-flex;
padding-left: 5px !important;
padding-right: 5px !important;
}
.floatRight {
float: right;
}
.floatClear {
float: right;
clear: both;
}
.padBot10 {
padding-bottom: 10px;
}
.padBot20 {
padding-bottom: 20px;
}
.padBot80 {
padding-bottom: 80px;
}
.padTop {
padding-top: 20px;
}
.padTop40 {
padding-top: 40px;
}
.margLeft {
margin-left: 5px;
}
.copyright {
background-color: #6f6f6f;
padding: 10px;
color: black;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: white !important;
}
.dropdown-menu > li > h5 {
padding: 10px 0px 10px 15px;
font-weight: bold;
color: #6cb645;
margin: 0px !important;
}
/* Remove border on dropdowns */
.navbar-nav > li > .dropdown-menu {
border: none !important;
padding: 0px !important;
}
/* Container top & bottom margin */
.topBotMargin {
margin-top: 20px;
margin-bottom: 20px;
}
/* Carousel */
/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
width: 100%;
}
.red-text {
color: #c75c5c;
}
.mission-vision {
font-weight: bold;
font-size: 20px;
color: #4d91bb;
}
.whats-new-small {
display: none;
}
If you reduce the size of the screen to get to the navbar-toggle button, click the button, then click the "Programs" drop-down, none of the drop-down menus is covering up the body content. I want the drop-down navigation to cover up everything below it.
I've searched a lot today, and I can't find out why it's not working. I'm pretty sure it was working at some point, but maybe it's something I changed with CSS that causes the problem?
Just add this style:
.navbar {
z-index:99;
}
my BOOTPLY... MY BOOTPLY HERE
I need my menu items (car, house, street, boat) to float right at same height level as my logo (for desktop dimensions) and everything else to stay the same as current (including mobile toggle menu behaviour).
Is that possible to achieve?
/* CSS used here will be applied after bootstrap.css */
/***** Menu *****/
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
}
.menu-container {
background-color: #fff;
border-bottom: 1px solid #000;
min-height: 20px;
position: relative;
}
.navbar-nav a:hover {
color: #000;
}
.navbar-nav a:link {
font-size: 12px;
font-family: 'century schoolbook';
color: #000;
text-decoration: overline;
text-decoration-color: #A10000;
}
.brand-name a {
text-decoration: none;
}
.brand-name img {
max-width: 137px;
padding: 8px;
/*position:absolute;*/
left: 0;
}
ul {
list-style-type: none;
}
.navbar-form input,.form-inline input {
width: auto;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
.navbar-default .navbar-nav > li > a {
color: #000;
font-family: 'LuzSans-Book';
font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #A10000;
color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-default .navbar-nav > .active > a {
background-color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-custom-social {
height: 15px;
float: right;
clear: none;
margin-right: 25px;
}
.navbar-fixed-top {
padding-top: 0;
}
.navbar-default .navbar-brand {
color: #777;
padding: 0;
height: inherit;
float: none;
display: inline-block;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav {
margin: 0;
}
.navbar-default {
background-color: transparent;
border: 0;
}
.navbar-collapse.collapse.in {
width: 100%;
}
p.ajaxSearch_intro {
margin: 0;
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
padding: 0;
}
/*toggle btn */
.navbar-default .navbar-toggle {
border: 1px solid #000;
border-radius: 0;
padding: 5px 10px;
color: #000;
background-color: #A10000;
}
#nav.affix .logo_wrap {
display: none;
}
#nav.affix-top .logo_wrap {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}
#nav.affix .logo_wrap-text {
display: none;
}
#nav.affix-top .logo_wrap-text {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix container navbar-fixed-top">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<img alt="***brandlogo***" src="assets/images/logo.png">
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
<ul class="navbar-nav nav">
<li>
car
</li>
<li>
house
</li>
<li>
street
</li>
<li>
boat
</li>
</ul>
</div>
</div>
</div>
</div></div></div>
</div></header>
You need to use display:inline-block; on both divs that contain your logo and menu items and then float the menu item div to the right.
The essential necessary changes are:
1.) Make sure that the CSS rule for .navbar-nav, contains float:right
2.) From the DIV <div class="clearfix prevent-float"></div>, remove both classes.
Now the two elements can be next to each other. They are not yet, but that is due to various padding and/or margin settings, which you also have to adjust.
When viewed on mobile devices I would like my navbar not to collapse, but stay as in the original desktop website. I have achieved this by overwriting the CSS in a media screen (code below). I would like, however, the navbar to stretch across the whole width, and this I cannot achieve.
I tried changing background-color of navbar-default to black, but it adds some margin which I can't seem to remove.
#media screen
and (min-width: 320px)
and (max-width: 767px)
and (orientation: landscape) {
body{
margin: 0 auto;
background-image: url(../images/background_vm.jpg);
/*background-repeat:no-repeat;*/
background-attachment: fixed;
background-size:100% auto;
font-family: 'Tinos', 'Times New Roman';
font-size: 22px;
margin-top: 0px;
}
.head-bg{
width: 100%;
height: 50px;
background: url(../images/nadpis2_bg.jpg);
background-size:100% 100%;
background-attachment: fixed;
}
.flags{
margin-top: -25px;
padding-right: 35px;
}
.flags img{
width: 35%;
}
.container{
max-width: 760px;
}
.content{
padding: 15px;
}
.height{
height: 50px;
background-color: transparent;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
/* Always apply the floated nav */
.navbar-nav {
background-color: #000;
float: none;
display: inline-block;
}
.navbar-nav > li {
float: left;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border-top-color: white;
}
.navbar-default .navbar-nav > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
font-size: 12px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="head-bg">
<div class="container">
<div class="pull-right flags hidden-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
<div class="height"></div>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav np">
<li class="nol">ЗА НАС</li>
<li>СТУДИО</li>
<li>ГАЛЕРИЯ</li>
<li>НОВИНИ</li>
<li>Е-МАГАЗИН</li>
<li class="nor">КОНТАКТИ</li>
</ul>
</div>
</nav>
<div class="pull-right flags visible-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
Here is a photo of what it looks like now:
And here is a photo of what I would like it to be:
The solution was to apply style to the ul inside the navbar-collapse div. Here is the css.
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
Here is the fixed example:
#media screen
and (min-width: 320px)
and (max-width: 767px)
and (orientation: landscape) {
body{
margin: 0 auto;
background-image: url(../images/background_vm.jpg);
/*background-repeat:no-repeat;*/
background-attachment: fixed;
background-size:100% auto;
font-family: 'Tinos', 'Times New Roman';
font-size: 22px;
margin-top: 0px;
}
.head-bg{
width: 100%;
height: 50px;
background: url(../images/nadpis2_bg.jpg);
background-size:100% 100%;
background-attachment: fixed;
}
.flags{
margin-top: -25px;
padding-right: 35px;
}
.flags img{
width: 35%;
}
.container{
max-width: 760px;
}
.content{
padding: 15px;
}
.height{
height: 50px;
background-color: transparent;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
/* Always apply the floated nav */
.navbar-nav {
background-color: #000;
float: none;
display: inline-block;
}
.navbar-nav > li {
float: left;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border-top-color: white;
}
.navbar-default .navbar-nav > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
font-size: 12px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="head-bg">
<div class="container">
<div class="pull-right flags hidden-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
<div class="height"></div>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav np">
<li class="nol">ЗА НАС</li>
<li>СТУДИО</li>
<li>ГАЛЕРИЯ</li>
<li>НОВИНИ</li>
<li>Е-МАГАЗИН</li>
<li class="nor">КОНТАКТИ</li>
</ul>
</div>
</nav>
<div class="pull-right flags visible-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
I have a weird problem that I just can't fix. Have tried alot of different things, but none seem to work.
When my site is in collapse mode = Ipad menu shows, it looks weird. I have made an image so you can see how it looks.
Well, first of all it does not expands by it self, which it should do? You can see that the menu item Destination are outside.
Second, how do I move the menu content more to the left, so there can be the same white space on each side? right now it looks silly :(
In my bootstrap.css file, i have only made some color changes. My navbar code from the Site.css file you see here:
/*---------------------------------------------*\
Navbar elements
\*---------------------------------------------*/
.navbar-inverse {
background-color: white;
border-width: 0px;
padding-top: 25px;
font-family: 'Raleway', sans-serif;
font-weight: 100;
}
.navbar-header {
padding-bottom: 30px;
padding-left: 80px;
}
.navbar-header a {
font-weight: 700;
vertical-align: baseline;
}
.navbar-header a:hover {
color: #003665;
}
#media (max-width: 1200px) {
.navbar-header {
padding-left: 10px;
}
}
#media (max-width: 768px) {
.navbarup {
display:none;
}
}
.navbarup {
height: 40px;
}
.navbarmiddle {
border-top: thick solid #205882;
border-width: 2px;
}
.navbarunder {
font-weight: 400;
font-size: 17px;
font-family: 'Lato', sans-serif;
padding-left: 80px;
}
#media (max-width: 1200px) {
.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);
display: block;
}
.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;
}
}
.links {
float: right;
margin-top: 20px;
margin-left: 300px;
}
Code (some of it):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="row">
<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>
<img height="55px" src="~/images/logo.jpg" />
</div>
</div>
</div>
<div class="navbarmiddle">
</div>
<div class="container">
<div class="row">
<div class="navbarunder">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class='#Html.IsActive("Home", "Index")'>
#Html.ActionLink("Home", "Index", "Home")
</li>
Can any tell me what elements i should try to tweak with css?
https://jsfiddle.net/6u9zoe5e/
bootstrap.js placed in the footer?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>