My navbar is hiding my the div that should be above it
Not complete replica of my own but here is the fiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Burger Corner</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- NAVBAR -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Burger Corner</a>-->
<img src="images/logo.png" width="90" height="60">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right main-nav">
<li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
<li><a class="page-scroll color_animation" href="#intro">Welcome</a></li>
<li><a class="page-scroll color_animation" href="#services">About us</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section class="top-title">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Burger Corner</h1>
</div>
</div>
</div>
</section>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Welcome section</h1>
</div>
</div>
</div>
</section>
<!-- About Section -->
<div id="wall_1" class="image"></div>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
CSS for the problematic div and the one that works :
.top_title{
font-family: 'Playball', cursive;
/* background-image: url(../images/intro.jpg) no-repeat center center;*/
background-size: cover;
width: 100%;
height: 100px;
background-color:#990000;
text-align:center;
padding-top: 150px;
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
z-index: 1;
}
CSS for the navbar:
.color_animation {
text-decoration: none;
margin-right: -5px;
margin-left: -5px !important;
color: white !important;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.color_animation:hover{
color: #990000 !important;
}
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav {
padding: 0;
/*margin: auto 0 auto;*/
}
li{
color: white !important;
word-spacing: 5px !important;
}
Extra CSS:
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
I even tried using the intro-section class and modified it, changed its name and added some code but it genuinely doesnt work.The navbar hides it, it doesnt have the background i told it to have or even the height
I made the navbar invisible just for the testing and as you can see the div is under the navbar and the orange section is the one i said i took its css and modified it.
I don't think there is a CSS solution to your code. You can check the scroll position to make the navbar fixed and back to static, by removing or adding the navbar-fixed-top class, like this:
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('.navbar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 51) {
$('.navbar').removeClass('navbar-fixed-top');
}
});
Updated FIDDLE.
Related
I am still quite new to making websites and this website I am currently working on is in early sstage of development, but I would like to make it responsive for mobile devices. I added this meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> but it doesnt seem to be working, the only thing that is working is user-scalabel=no. I tried different variations of the scale and bunch of different arguments but the result is still the same. There is probably issue with the css. Any ideas? Thank you.
function anim() {
$(".slider").delay(1000).animate({
width: 'show',
}, 1000);
}
$(document).ready(function () {
$('.carousel').carousel({
pause:"false"
})
})
body {
overflow-y: scroll;
overflow-x: hidden;
background-color: moccasin;
}
.secondpic {
margin-top: 10%;
display: block;
width: 100%;
overflow: hidden;
height: auto;
position: relative;
}
.arrow {
margin-top: 10%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
height: auto;
position: relative;
}
#text {
overflow: hidden;
position: relative;
text-align: center;
bottom: 5vw;
transform: rotate(-2deg);
font-size: 1.9vw;
color: #634731;
font-weight: bold;
}
.slider {
display: none;
position: absolute;
right: -60px;
top: 0;
}
.container {
margin-right: 0;
}
.navbar {
top: -100px;
white-space: nowrap !important;
padding-top: 100px !important;
float: right;
background-color: transparent;
padding-bottom: 0 !important;
border-bottom: 0 !important;
z-index: 10;
right: 0;
padding-right: 0;
position: fixed;
opacity: 1;
margin: 0;
}
.buttons {
padding-bottom: 0;
margin-bottom: 0px !important;
margin-right: -1px;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.logo {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.text-white {
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.bg-secondary {
background-color: rgba(225, 159, 113, 1) !important;
}
.buttons a:hover {
background-color: orange !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Prosatin</title>
<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">
<script defer src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="website.js"></script>
</head>
<header>
<div class="">
<nav class="navbar navbar-expand-lg navbar-light slider">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav buttons">
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">FOTOGALERIE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">AKCE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">O NAS</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">ZPEVNIK</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">KONTAKTY</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary buttons logo"
href="https://www.facebook.com/letnistanovytaborProsatin/"><img src="facebook.png"> </a>
</div>
</div>
</nav>
</div>
</header>
<body onload="anim()">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.ibb.co/sjngKLM/tabor.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/JHYhT9Z/DSC-7364.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/yS42F7s/im2.png" alt="Third slide">
</div>
</div>
</div>
<div>
<img class="arrow" src="https://i.ibb.co/VM1v7kD/Image-5.png">
<p class="" id="text">NEJNOVEJSI FOTOGRAFIE</p>
<img class="secondpic" src="https://i.ibb.co/NjpppGn/Image-4.png">
</div>
</body>
</html>
JSfiddle
Incorrect layout on a phone
I cant get the snippet and JSfiddle working properly, but it should give you the idea.
you need to use Media Query like this:
#media only screen and (max-width: 600px) {
body {
// css
}
}
I'm seeing that you have a markup issue. You've a <header> inside the <html> and that's wrong. The <html> tag only has 2 children: <head> and <body>. So, the <header> should be inside the <body> and maybe that's the problem because your meta tags are fine.
You could read more about the anatomy of an HTML document here (scroll a little)
I am having issues centering this div which is being activated in JavaScript to show onclick of an <a> tag. It can be found at the bottom of the page with the text "This is a test" with a small padding background. Usually it would only appear with an onclick but I have disabled that for now.
I have tried justify-content and all the usuals (I think). I have a feeling that a parent tag is interfering with it and giving it CSS that I don't want it to. I have used Inspect Element to no avail in finding this, if it is the case.
Any advice would be appreciated.
Thanks.
var mouseFollowX = 0,
mouseFollowY = 0,
x = 0,
y = 0,
friction = 2 / 30;
function backgroundMover() {
x += (mouseFollowX - x) * friction;
y += (mouseFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.3)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(backgroundMover);
}
$('.wrap').on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
mouseFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
mouseFollowY = (10 * lMouseY) / 100;
});
backgroundMover();
function showDevFunction() {
var getDev = document.getElementById("showDev");
if (getDev.style.display === "block") {
getDev.style.display = "none";
} else {
getDev.style.display = "block";
}
}
#mainnav {
background-color: #FBFBFB;
}
h1 {
margin-bottom: 0;
padding: 0;
}
.header-brand {
margin-bottom: -8px;
margin-top: 0;
margin-right: 20px;
}
h1.header-brand {
margin-right: 25px;
margin-top: -10px;
margin-left: 20px;
}
.nav-bg {
padding: 33px;
margin: 0;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
}
h1.hero-heading {
color: white;
position: absolute;
padding-left: 15%;
top: 0.70em;
left: -0.75em;
line-height: 0.8;
font-family: Roboto, sans-serif;
font-size: 10vh;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-shadow: 3px 3px 5px black;
}
.hero-heading span {
padding-left: 0.5em;
}
h3.hero-content {
color: white;
position: absolute;
background-color: rgba(53, 79, 92, 0.50);
padding: 0.75em 0.75em 0.75em 15%;
top: 11em;
left: -0.75em;
line-height: 1.5em;
max-width: 76%;
font-family: Roboto Slab, serif;
font-size: 2.5vh;
font-weight: lighter;
font-style: normal;
}
.wrap {
width: 100%;
height: 55vh;
position: relative;
overflow: hidden;
margin-bottom: 35px;
}
.bg {
z-index: -1;
position: static;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
width: 100%;
height: 55vh;
transform: scale(1.3);
}
.cta {}
img.cta {
opacity: 100;
background: white;
-o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
/* ...and now override with proper CSS property */
transition: opacity .2s ease-out;
}
img.cta:hover {
opacity: 0;
}
.cf {}
.cf img {
position: absolute;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
.cta-sub {
position: relative;
margin-top: 200px;
}
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin: 275px 0 0 0;
}
#showDev {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Layouts</title>
<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.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles/main.css" type="text/css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
</head>
<body>
<header class="navbar-inverse" role="banner">
<div id="mainnav">
<!-- Can change class="navbar-static-top", to class="navbar-fixed-top" to have nav stuck top -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<a class="header-brand" href="index.html"><img src="img\main\logo-text-web.png" height="100" width="408"></a>
<!-- <h1 class="header-brand">David Olijnyk <br>Webmaster Services</h1> -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link nav-bg" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrap">
<div class="bg"></div>
<h1 class="hero-heading"> your <br> <span>solution</span></h1>
<div class="hero-content-box">
<h3 class="hero-content">Keep your most important business services in one place, with easy and frequent communication. Having an online presence has never been so easy and impactful. </h3>
</div>
</div>
<div class="container">
<div class="row">
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDevFunction()">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
<div class="show-more" id="showDev">
This is a test
</div>
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDev">
<img class="cta bottom rounded" src="img/home/photo-more.png">
<img class="cta top rounded" src="img/home/photo.png">
</a>
<a href="#" class="cf col-4 d-flex justify-content-center">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
</div>
<div class="row cta-sub">
<h3 class="cf col-4 d-flex justify-content-center">Webmaster</h3>
<h3 class="cf col-4 d-flex justify-content-center">Photography</h3>
<h3 class="cf col-4 d-flex justify-content-center">Graphic Design</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>
The only block with position:relativeis the .wrap so #showDev is positioned relatively to the body.
Add the following position:relative to the .container element and #showDev will do 80% of this block.
I would use margin:auto and text-align: center.
.nameOfTheDiv{
margin: auto;
text-align: center;
}
This will help to position your div in the center.
In your show-more class you are using margin-left: auto; and margin-right: auto;. But again you have used margin: 275px 0 0 0;
which is manipulating the previously set values. Additionally, you have to add left: 0; and right: 0; with it.
So, change it like below:
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin-top: 275px;
left: 0;
right: 0;
}
In case you are looking for something to center the div like an alert box
div {
position: absolute;
margin: auto;
max-width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I have a navbar that shrinks on scroll, the li's in the navbar-nav have an image, when the navbar shrinks on scroll the image stays but the text display becomes none.
I have a function that shows this text on hover after it disappears but i have a problem, i only want this function to work only after the navbar shrinks, and when the navbar goes to it's normal size i don't want this function to work, and another thing i want the function to display the text for each li separately because when i hover it shows all of the spans with the text, i only want the child of the li, i tried the .children() method but it didn't work, please help! here is my code:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
$('.home').hover(function() {
$(this).css('margin-right', '5px');
$('.navbar-nav li a span').css('display', 'block');
$('.navbar-nav li a').css('height', '155px');
$('.navbar-nav li a img').css('margin-right', '5px');
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
<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">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
to achieve the behaviour you want, you do not need to abuse javascript, of course it can be done with JS, but it is much easier and straightforwad is just to use CSS
just add this rule to your code:
nav.shrink .navbar-nav li:hover a span{
display: block
}
this is of course just example, but I am sure that using the CSS approach you will achieve your goal easier, faster and without extra performance overhead=)
Here is a working snippet:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
nav.shrink .navbar-nav li:hover a span{
display: block
}
<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">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
I am using bootsrap 4 alpha 6, and midnight.js to change the color of navigation menu toggler. I want to insert a text (MENU) next to it. Example in the Capture. For text toggler I use fontawesome.
Thanks your time and help!
the source html
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span>
</button>
</div>
using midnight.js, will looks like this
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div></button>
</div>
It works ok, only I want to add a text to it.
now it looks like:
and I want
I tried
MENU<span class="fa fa-bars fa-2x"></span>
it looks
Try by adding display:inline; to your icon:
<span class="fa fa-bars fa-2x" style="display:inline;"></span>
Try doing this
MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>
This will make the icon an inline element (same as the text)
Also check to see if something is restricting the width of the element, also check the parent elements for this too. This may prevent the next from displaying inline with the icon.
I've manipulated some code which I answered here some time ago. Tested with my phone and it works. Its on Bootstrap. I am answering this question and drinking some wine. So, I will just close my computer soon after posting this answer. Hope is what you want.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
</script>
<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-sm-10 visible-sm visible-md visible-lg">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-7 visible-xs">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
<strong>Menu</strong>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" 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>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have created a modal here just below the pic saying "click for details".
Can we create the same modal,which would work on clicking the picture of the person.
code :
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/
.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Team
---------------------------------*/
.team-leader-block {
max-width: 993px;
margin: 0 auto;
}
.team-leader-box {
width: 30.66%;
margin-right: 3.82979%;
height: 490px;
overflow: hidden;
text-align: center;
float: left;
}
.team-leader-box span {
margin-bottom: 24px;
display: block;
}
.team-leader-box:nth-of-type(3n+0) {
margin: 0;
}
.team-leader {
width: auto;
height: auto;
position: relative;
border-radius: 50%;
box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 50%;
}
.team-leader-shadow a {
display: block;
width: 100%;
height: 100%;
}
.team-leader:hover .team-leader-shadow {
box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover ul {
display: block;
opacity: 7
}
.team-leader img {
display: block;
border-radius: 50%;
}
.team-leader ul {
display: block;
opacity: 0;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
margin-top: -14px;
z-index: 15;
transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/
.team-leader ul p2 {
display: inline;
font-size: 25px;
color: blue;
text-align: center;
cursor: pointer;
cursor: hand;
}
.
/* Footer
---------------------------------*/
.footer {
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 35px 0 35px;
}
.footer-logo {
margin: 15px auto 35px;
width: 76px;
}
.copyright,
.credits {
color: #cccccc;
font-size: 14px;
display: block;
text-align: center;
}
.copyright a,
.credits a {
color: #7cc576;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#team.main-section.team {
background-color: #e6e6e6;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<!-- related to number count -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style1.css">
<!-- number count ends -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
</head>
<body>
<header class="header" id="header">
<!--header-start-->
</header>
<!--header-end-->
<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>Medals</h2>
<h6></h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>
<!-- Large modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click for Details
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<!-- team-leader-box div ends -->
</div>
<!-- team-leader-block clearfix div ends -->
<!-- popup div ends -->
</div>
<!-- container div ends -->
</section>
<!--main-section team-end-->
<footer class="footer">
<div class="container">
<div class="footer-logo">
<a href="#">
<img src="img/footer-logo.png" alt="">
</a>
</div>
<span class="copyright">© Knight Theme. All Rights Reserved</span>
<div class="credits">
Business Bootstrap Themes by BootstrapMade
</div>
</div>
</footer>
<script src="js1/index1.js">
</script>
</body>
</html>
Live website to check in the browser : http://79.170.44.120/shivams.com/
Kindly help .
Add data-toggle and data-target on the ul where write text
<ul data-toggle="modal" data-target="#myModal">
<p2>Click For Details</p2>
</ul>
Hope this works :)
Updated code:
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
Click For Details
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<!-- <ul> Remove this ul move text in a tag
<p2>Click For Details</p2>
</ul> -->
</div>
CSS:
.team-leader-shadow a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
transition: all 0.6s ease-in-out;
font-size: 20px;
opacity: 0;
color: #fff;
text-decoration:none;
}
.team-leader:hover .team-leader-shadow a{
opacity:1;
}
Updated working code here : https://jsfiddle.net/j7xpLq28/
<ul data-toggle="modal" data-target="#myModal">
<p2>Click For Details</p2>
</ul>
Try It Once This is works fine .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<img src="http://www.indianfunpic.com/wp-content/uploads/2016/06/Funny-Kids-14.jpg" height='100' width='100' data-toggle="modal" data-target="#myModal">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Only this plays a key role ````v
<img src="http://www.indianfunpic.com/wp-content/uploads/2016/06/Funny-Kids-14.jpg" height='100' width='100' data-toggle="modal" data-target="#myModal">
<img src="http://placehold.it/300x200.jpg" alt="" data-toggle="modal" data-target="#myModal"/>
Use the data-toggle and data-target on the image.
Both data-toggle and data-target are used to connect any element with a specific modal. data-toggle says to toggle the modal and data-target tells which modal to open.
Hope this helps :)