I have a header in my website designed in bootstrap and HTML, it is a sticky header, the image is supposed to appear above the menu nav and I was trying to make it responsive, I got it to reduce in size but the image does not center to the middle of the page and menu comes off wrong when the page is resized too. Not really great with CSS.
below is the HTML code
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
left: 100px;
font-weight: bold;
justify-content: center;
margin-top: 15px;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.center-image {
position: relative;
left: 255px;
margin-bottom: 20px;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<head>
<title>Home | Relationinc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://relationinc.com.ng/lib/css/theme.css" rel="stylesheet" type="text/css">
<link href="https://relationinc.com.ng/lib/css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="center-image align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>
Replace Your this code I hope this will help you.
.center-image {
position: relative;
left: 0;
margin-bottom: 20px;
display: block;
text-align: center;
}
First, you are using bootstrap3 and bootstrap4 css both...why this?
be specific about the bootstrap version which one you want to use..
Use img-responsive center-block bootstrap3 classes to your image...
or use d-block mx-auto to your image if you are using bootstrap4.
And also remove the left:100px from the header...I have changes some of your css.
If you want to make layout responsive be sure not to use fixed px values..try to use values in % if required anywhere.
Stack Snippet
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
font-weight: bold;
justify-content: center;
margin-top: 15px;
left: 0;
right: 0;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg" class="img-responsive center-block">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>
Related
I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
<script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=" top-back">
<img src="images/Untitled-2.png" alt="">
</div>
<div class=" main-back" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 ">
<div class="blue">
<img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
<ul>
<li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
<li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
<li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row white-box">
<div class="col-5">
<div class="">
<h1>Facelift Surgery</h1>
<p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
</p>
<button>Make an appointment</button>
</div>
</div>
<div class="col-7 face">
<img src="images/face.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-back">
<img src="images/Untitled-3.png" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* CSS Document */
body{
margin: 0
}
.top-back img{
width: 100%;
padding: 0 !important;
position: relative;
top: 10px
}
.main-back{
background-color: #f3e5d8;
height: 600px
}
.bottom-back img{
position: relative;
top: -10px;
width: 100%
}
.white-box{
background-color: #fff9f3;
border-radius: 30px;
position: relative;
top: 108px;
height: 450px
}
.face img{
width: 94.5%;;
position: absolute;
top: -124px;
right: 23px;
}
.blue{
background-color:#2d3663;
border-radius: 30px;
position: relative;
top: -4px;
width: 78%
}
.blue ul{
text-align: center;
text-decoration: none;
cursor: pointer;
color: white;
list-style-type: none;
padding: 0;
height: 596px
}
.blue li{
padding: 15px 0;
position: absolute
}
.blue img{
display: block;
margin: auto;
width: 90%;
margin-bottom: 10px
}
.white-box h1 {
color: #cd8274;
margin-top: 40px
}
.white-box p{
color: #474e75;
margin: 40px 0;
line-height: 29px;
font-size: 20px;
}
$(document).ready(function(){
$('.pics2').hover(function(){
$('.magic').animate({top: "195px"});
});
$('.pics1').hover(function(){
$('.magic').animate({top: "0"});
});
$('.pics3').hover(function(){
$('.magic').animate({top: "384px"});
})
});// JavaScript Document`
i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked
Console shows me $(...).animate is not a function
This is the reason
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.
Use the full one instead.
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
In my list some of words are with two lines, but second line jumps under the icons bottom, how can i keep next to the icon both lines? I'm doing this with bootstrap and choosed to use list-inline class maybe its enough to do with columns this list or what will be the best way to do or fix this list?
This is how i need it:
JSFIDDLE
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.list-inline {
margin: 0;
}
.icon-europe {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/xhRsmPz/europe.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.icon-warranty {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/VLy7ssd/warranty.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Inline list</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li class="list-inline-item"><span class="icon-europe"></span> Dirbame visoje<br> Europoje
</li>
<li class="list-inline-item"><span class="icon-warranty"></span> 2 metų garantija
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The easiest way is to use flexbox and align-items:
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-family: arial;
}
.icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.icon-europe {
background: url("https://i.ibb.co/xhRsmPz/europe.png") no-repeat;
}
.icon-warranty {
background: url("https://i.ibb.co/VLy7ssd/warranty.png") no-repeat;
}
<ul>
<li><span class="icon icon-europe"></span>Dirbame visoje<br />Europoje</li>
<li><span class="icon icon-warranty"></span>2 metų garantija</li>
</ul>
You can change your list code to below
<li class="list-inline-item"><span class="icon-europe" style="float:left"></span> Dirbame visoje<br> Europoje
</li>
You can add images in html like this:
HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="d-flex">
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/xhRsmPz/europe.png" alt="">
<div>Dirbame visoje</br>Europoje</div>
</li>
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/VLy7ssd/warranty.png" alt="">
<div>2 metų garantija</div>
</li>
</ul>
</div>
</div>
CSS:
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.icon{
width: 24px;
height: 24px;
margin-right: 10px;
}
I have tried to paste "a" tag inside "li". But I can't understand why there is no pointer cursor on tag and href attribute doesn't work as usual.What bootstrap property locks it? It is not enough paddings for li tag? Or what I'm doing wrong? What is a better way to improve it using bootstrap classes? Any help will be appreciated.
body {
margin: 0;
padding: 0;
font-family: "Arial, Helvetica, sans-serif,";
font-size: 12px;
font-weight: normal;
}
.header {
background-color: #222222;
height: 114px;
}
ul {
color: white;
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-family: "MyradProRegular";
font-size: 14px;
text-transform: capitalize;
}
.input-group {
display: flex;
}
.container-fluid {
height: 100px;
}
.navbar {
width: 37%;
margin-bottom: 0 !important;
min-height: 0px !important;
}
.search-panel-block {
width: 40%;
}
img {
max-width: 100%;
}
.menu-items__item {
list-style-type: none;
}
.search-panel {
padding-top: 34px;
}
.nofloat {
float: none;
}
.agileheader-topbar-grid {
margin-left: auto;
}
.nav > li > a {
position: static;
padding: 0;
}
.btn {
width: 65px;
background-color: #f10e34;
border-color: #f10e34;
}
.glyphicon-search {
color: #ffffff;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="menu-logo">
<img src="logo.jpg" alt="market-logo.jpg">
</div>
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
<ul class="menu-items nav">
<li class="menu-items__item">My account</li>
<li class="menu-items__item nav-link">Wishlist</li>
<li class="menu-items__item nav-link">My Cart</li>
<li class="menu-items__item nav-link">Checkout</li>
<li class="menu-items__item nav-link">Login</li>
</ul>
</nav>
<div class="agileheader-topbar">
<div class="container">
<div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
<form class="search-panel">
<div class="input-group add-on">
<input class="form-control" name="srch-term" type="text" placeholder="Search">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
It is due to div with "agileheader-topbar" class override the menu.
Use below code.
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right" style="z-index: 1;">
Answer:
.navbar {
z-index: 1;
}
body {
margin: 0;
padding: 0;
font-family: "Arial, Helvetica, sans-serif,";
font-size: 12px;
font-weight: normal;
}
.header {
background-color: #222222;
height: 114px;
}
ul {
color: white;
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-family: "MyradProRegular";
font-size: 14px;
text-transform: capitalize;
}
.input-group {
display: flex;
}
.container-fluid {
height: 100px;
}
.navbar {
width: 37%;
z-index: 1;
margin-bottom: 0 !important;
min-height: 0px !important;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="menu-logo">
<img src="logo.jpg" alt="market-logo.jpg">
</div>
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
<ul class="menu-items nav">
<li class="menu-items__item">My account</li>
<li class="menu-items__item nav-link">Wishlist</li>
<li class="menu-items__item nav-link">My Cart</li>
<li class="menu-items__item nav-link">Checkout</li>
<li class="menu-items__item nav-link">Login</li>
</ul>
</nav>
<div class="agileheader-topbar">
<div class="container">
<div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
<form class="search-panel">
<div class="input-group add-on">
<input class="form-control" name="srch-term" type="text" placeholder="Search">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
your nav under another div element so when you mouse enter in nav item this hasn't hovered actually, it has hovered in another div element (.agileheader-topbar). so you try this CSS
.agileheader-topbar {
width: 40; /*or is your needed */
}
I am using bootstrap to create a website from scratch, it's the first time I use bootstrap so I might be doing something wrong.
I am trying to implement a individual scroll panel for each of the 3 content columns, and it doesn't appear to be working as the scroll appears but grayed out and not working properly
I pasted the code below using stackoverflow html app but some elements are not displaying properly so here is a link to the fully working site as of now
body {
padding-top: 159px;
overflow: hidden;
}
html {
overflow: hidden;
}
#navbar_right {}
.container {}
#categorias {
background-color: #171717;
overflow: scroll;
height: 100%;
}
#content {
background-color: #ffffff;
}
.btn {
border-radius: 0;
}
.cat {
margin: 10% 0% 10% 15%;
position: relative;
z-index: 1;
}
#right-bar {
}
/* Menu Top Navbar */
.button {
position: relative;
background-color: inherit;
border: none;
font-size: 16px;
font-family: Roboto;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
outline: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.button:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.button:after {
content: "";
background: #ffffff;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ComISTo Grupo 3</title>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyhttp://stackoverflow.com/questions/ask#jSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<header class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">ComISTo</a>
</div>
<div id="navbar_right" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- NavBar Buttons -->
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/empregado.png"/><br/>Chamar Empregado</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/pagar.png"/></br>Pagar</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/ajuda.png"/><br/>Ajuda</button></li>
</ul>
</div>
</header>
</nav>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Sidebar -->
<div class="col-md-2" id="categorias">
<img src="images/broccoli.png" /></br> Vegetariano
<img src="images/steak.png" /></br> Carne
<img src="images/fish.png" /></br> Peixe
<img src="images/glass.png" /></br> Vinhos
<img src="images/ice-cream.png" /></br> Sobremesa
</div>
<div class="col-md-6" id="content">
</div>
<div class="col-md-4" id="rightbar"></div>
</div>
</div>
</body>
</html>
I think that the problem is that the height of the #categorias column is set to 100%, you should give a specific height. Try something like:
#categorias {
height: 400px
}