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
Related
Currently coding a responsive navbar however 2 things are really bothering me that I can't get my head round. Any help would be appreciated:
1/ With my original logo pic I have been using, I have got the nav links to line up with it (like a sort of display inblock) but I have noticed only lines up in full screen view, as you minimize the screen the links cluster up underneath and then eventually disappear when the screen is really small and the togglebox appears. How can you fix this problem.
2/ I can’t get the icons to hide from the links in fullscreen view, yet I have done the display:none in the coding
My html code so far:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
My CSS so far:
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}
Put de icon into a div block and hidden the div object.
<div class="boton-menu"><i class="fa fa-bars"></i></div>
and the css:
.boton-menu{
display: none;
}
.fa:fullscreen {
display: none
}
... should do it.
At this point, unprefixed support sits at 1.99% while the prefixed support should be 81.71%:
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
However, in my Chrome (v70.0.3538.77) it doesn't seem to work.
According to this article Chrome v71 will support it.
Spec here.
Browser compat here.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header {
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1 {
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left: 0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #802CED;
color: #000000;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align: right;
color: rgba(185, 153, 2, 1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right: 1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #000000;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
`I am trying to create a dropdown menu for my website,changing z-index is not bringing the dropdown infront of other elements.
The image looks like this
If you want me to include the CSS, ill include.. If there is any quick fix let me know. Z-index and changing position: absolute doesn't work either.
The issue is the overflow:hidden you have in place meaning that dropdown was there but the overflow was hiding it.
I'm assuming the overflow was there as a clearfix? If so, alternative solutions exist.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
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
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
I'm trying to create a timeline similar to Facebook's timeline, i.e. I want a timeline with two columns where I can place elements on the left and on the right.
In order to do so, I started with the following code but it does not work as expected:
<ol class="timeline2 clear">
<li class="spine">
</li>
<?php
$counter=0;
foreach ($response as $row) {
if($counter % 2 == 0){$class= "right";} else $class="left";
?>
<li class="<?=$class ?>">
<i class="pointer"></i>
<div class="unit">
<!-- Story -->
<div class="storyUnit">
<div class="imageUnit">
<? if (empty($row->pic)) { ?>
<img width="32" height="32" alt="" src="images/nopic.png">
<? } else { ?>
<img width="32" height="32" alt="" src="uploads/<?php echo $row->pic; ?>">
<? } ?>
<div class="imageUnit-content">
<h4><?php echo $row->fullname; ?></h4>
<p><?php echo $row->ev_date ?></p>
</div>
</div>
<p><?php echo $row->ev_text; ?></p>
<? if (!empty($row->ev_pic)) { ?>
<p><img src="uploads/<?php echo $row->ev_pic ?>" width="250" height="250"</p>
<? } ?>
</div>
<!-- / Story -->
<!-- Units -->
<ol class="storyActions">
<!-- / Comment -->
</ol>
<!-- / Units -->
</div>
</li>
<?php $counter++; } ?>
<div class="clear"></div>
</ol>
<? } ?>
the css of this box like :-
.timeline2 {
background: url("../images/line.png") repeat-y scroll center top transparent;
list-style: none outside none;
margin: 0;
padding: 6px;
position: relative;
height:auto;
}
.timeline2 > li {
clear: left;
float: left;
margin-bottom: 15px;
position: relative;
width: 326px;
z-index: 2;
}
.timeline2 > .right {
clear: right;
float: right;
}
.timeline2 .pointer {
background: url("../images/icons-4.png") no-repeat scroll -41px -28px transparent;
height: 15px;
position: absolute;
right: -18px;
top: 20px;
width: 19px;
}
.timeline2 .right > .pointer {
background-position: -61px -28px;
left: -18px;
right: auto;
}
.timeline2 > .left + .right > .pointer {
top: 40px;
}
.timeline2 > .right + li > .pointer {
top: 40px;
}
.timeline2 .highlight {
clear: both;
float: none;
width: auto;
}
.timeline2 .spine {
height: 100%;
left: 436px;
position: absolute;
width: 29px;
z-index: 1;
}
.timeline2 .spine > a, .timeline2 .spine a:visited {
display: block;
height: 100%;
}
.unit {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #C4CDE0;
border-radius: 3px 3px 3px 3px;
padding: 5px;
}
.storyUnit {
padding: 10px;
}
.imageUnit {
border-bottom: 1px solid #CCCCCC;
font-size: 11px;
margin-bottom: 15px;
padding-bottom: 5px;
}
.imageUnit .imageUnit-content {
display: inline-block;
padding-left: 5px;
vertical-align: top;
}
.imageUnit .imageUnit-content > p {
margin: 0;
}
.imageUnit .imageUnit-content a{
display: inline-block;
padding-left: 5px;
vertical-align: top;
color: #3589CF;
}
.photoUnit {
margin: 0 -10px -5px;
}
.controls {
background: none repeat scroll 0 0 #F2F2F2;
border-top: 1px solid #E6E6E6;
list-style: none outside none;
margin: 5px -5px -5px;
padding: 4px;
}
.controls > li {
display: inline-block;
}
.controls .post {
float: right;
}
.actions {
font-size: 11px;
font-weight: bold;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
.actions > li {
border-left: 1px solid #E5E5E5;
display: inline;
float: left;
}
.actions > li:first-child {
border-left: medium none;
}
.actions > li > a {
display: inline-block;
margin: 0 3px;
padding: 5px;
}
.actions > li > a:hover {
background: none repeat scroll 0 0 #EBEEF4;
text-decoration: none;
}
.actions .active > a {
color: #000000;
}
.storyActions {
background: none repeat scroll 0 0 #EDEFF4;
font-size: 11px;
list-style: none outside none;
margin: 0;
padding: 5px 10px;
}
.storyActions > li {
display: inline;
}
.storyActions > li:before {
content: " · ";
}
.storyActions > li:first-child:before {
content: "";
}
#Spinner {
padding: 10px 0;
text-align: center;
}
when the left box is big than right, and there are another left box, the right box not show behind left box, there are below left box.
how can i show it behind left box
see :- http://jsfiddle.net/RuVqu/
You need to use a dynamic grid layout. It works by placing elements in optimal position based on available vertical space.