does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.
My guess is you use col's with some css?
I managed to create the section i wanted the code i am using is:
CSS:
.menu {
background-color: lightblue;
overflow: hidden;
background-color:white;
}
.menu:after {
content: "";
border-bottom: 850px solid transparent;
border-right: 400px solid #0055b7;
position: absolute;
left: 80%;
top: 0;
}
.nav-menu ul {
list-style: none;
display: inline-flex;
}
.nav-menu ul li {
padding: 40px;
}
.blue-bg {
background-color: #0055b7;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="menu col-md-5">
<img class="paddingHeader" src="assets/images/headerlogo.png" />
</div>
<div class="content col-md-7 blue-bg">
<div class="nav-menu">
<ul>
<li><a class="text-white" href="">Home</a></li>
<li><a class="text-white" href="">About Us</a></li>
<li><a class="text-white" href="">Properties To Let</a></li>
<li><a class="text-white" href="">We Buy Houses</a></li>
<li><a class="text-white" href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
Related
'data2' should be shown only on hover of SubSubmenu1, But it opens while hovering on SubMenu1 itself (along with data1 and subsubmenu1 dropdown). Can anyone guide me how to make it(data2) open only when hovered on SubSubmenu1. Thank you.
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li class="dropdown-submenu">
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubMenu1</a>
<div id="SM1" style="margin-right:100px;" aria-labelledby="navbarDropdown">
<ul class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="data1" data-id=0 checked>
<label for="data1">data1</label>
</li>
<li class="dropdown-subsubmenu">
<!-- with submenu -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubSubMenu1</a>
<div id="SubSubMenudata" style="margin-right:100px;" aria-labelledby="navbarDropdown">
// this dropdown opens when I hover on SubMenu1.
// Should open only when I hover on SubSubMENU1
<ul style="background-color: grey;" class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="d2" data-id=0 checked>
<label for="d2">data2</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
Below is the CSS.
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
Your code needs some improvement - I've chopped out some lines to make clear which needs you to reorganize it again. The functionally should be working now. Hope that's work!
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;
}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0;
line-height:25px;
}
.smenu{
display:none
}
ul.left_menu li.odd:hover .smenu
{
display:block;
color: #FFB03B;
}
ul.left_menu li.even:hover .smenu
{
display:block;
color: #FFB03B;
}
<ul class="left_menu">
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li >
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
>SubMenu1</a>
<ul >
<li class="even">SubSubMenu1
<!-- with submenu -->
<ul class="smenu">
<li >
<a>data2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</ul>
I havent tested this with your code. so it might not work perectly for you.
but below is a link to a thing called "onmouseover Events".
this is using javascript to apply the css on whats called "mouseover".
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
Documentation: https://www.w3schools.com/jsref/event_onmouseover.asp
see if maybe you can use this :)
Below is an CSS only example aswell if you dont want to use the java script example i posted.
Just click the "Run Snippet" button to test it.
* {
font-family: sans-serif;
}
#horizontalmenu ul {
list-style: none;
padding: 0;
}
#horizontalmenu>ul>li {
float: left;
position: relative;
border: 1px solid #555555;
border-radius: 3px;
background-color: #383838;
}
#horizontalmenu>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: white;
}
#horizontalmenu>ul>li>a:hover {
background-color: rgb(104, 104, 104);
}
#horizontalmenu>ul>li>ul {
background-color: rgb(148, 148, 148);
display: none;
width: 150px;
top: 100%;
left: 0;
position: absolute;
}
#horizontalmenu>ul>li>ul>li {
position: relative;
width: 100%;
display: block;
}
#horizontalmenu>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
}
#horizontalmenu>ul>li>ul>li>a:hover {
background-color: rgb(73, 73, 73);
}
#horizontalmenu>ul>li:hover>ul {
display: block;
}
#horizontalmenu>ul>li>ul>li>ul {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 150px;
}
#horizontalmenu>ul>li>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
background-color: #797979;
}
#horizontalmenu>ul>li>ul>li:hover ul {
display: block;
}
<div id="horizontalmenu">
<ul>
<!-- list start -->
<li>
Menu 1
<ul>
<li>
text
</li>
<li>
text
</li>
<li>
text >
<ul class="horizontal">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>
text
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li> text</li>
<li> text</li>
<li> text</li>
</ul>
</li>
</ul>
</div>
I have created a drop down style menu using scss and bootstrap. I have been able to set everything up as required with one issue.
When hovering over the arrow on top of the drop down menu it highlights the arrow, I don't want this to happen. The arrow should only highlight when the first menu item is on hover.
How could I fix this? See codepen link :
https://codepen.io/duodice/pen/NJJXYJ
(images don't load that's fine as they're local files)
To replicate the problem :
1. Hover over "Services" on navbar
2. Hover over small triangle at the top of drop down menu
The scss :
$pop-up-menu-bg-clr : white;
$pop-up-menu-shade-clr : #B0c1d3;
$pop-up-menu-font-clr : #1b2b43;
.pop-up-menu-container {
position: relative;
li:hover {
.pop-up-menu-list {
display: block;
}
}
}
.pop-up-menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding-top: 1.5rem;
background-color: transparent;
z-index: 999;
li a {
transition: none !important;
display: block;
color: $pop-up-menu-font-clr;
text-align: left;
background-color: $pop-up-menu-bg-clr;
width: 100%;
padding: 1rem;
&:hover {
background-color: $pop-up-menu-shade-clr;
color: white;
}
img {
height: 80%;
}
p {
color: $pop-up-menu-font-clr;
font-size: 13px;
margin-bottom: 0;
}
}
li:first-child {
position: relative;
z-index: 998;
&:hover {
border-bottom-color: y
}
a {
border-radius: 15px 15px 0 0;
}
&:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 1rem solid transparent;
border-bottom-color: $pop-up-menu-bg-clr;
top: 0;
left: 30%;
margin-top: calc(-2rem + 1px);
}
&:hover:before {
border-bottom-color: $pop-up-menu-shade-clr;
}
}
li:last-child a {
border-radius: 0 0 15px 15px;
}
}
Html :
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" id="sidebarCollapse" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav pop-up-menu-container">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
<ul class="pop-up-menu-list list-unstyled">
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/settings.svg">
</div>
<div class="col">
All Services
<p>Learn more about our services</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/web_development_devices.svg">
</div>
<div class="col">
Web Development
<p>Design & Development</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/hosting_cloud.svg">
</div>
<div class="col">
Hosting & Maintenance
<p>Store your site online</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/marketing_growth.svg">
</div>
<div class="col">
Digital Marketing
<p>Get more visitors today</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Thanks.
You set hover to li of first child without a (as you set to rest of li):
Change it to li a:hover:
See working code
li:first-child {
position: relative;
z-index: 998;
a:hover {
border-bottom-color: y
}
a {
border-radius: 15px 15px 0 0;
}
a:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 1rem solid transparent;
border-bottom-color: $pop-up-menu-bg-clr;
top: 0;
left: 30%;
margin-top: calc(-2rem + 1px);
}
a:hover:before {
border-bottom-color: $pop-up-menu-shade-clr;
}
}
I've been trying to figure this out for so long and I've finally given up... I've already defined a div and I would like to center some tabs in it, but nothing seems to work. Any suggestions?
HTML:
<section class="area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</section>
CSS:
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 75%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
Thanks in advance.
There is a problem with your code , you have set width to area 75% the container width 1170px , container pull out the area div, thats why you got this problem, i just put the area div into container, please check with the snippet. i have solved your issue.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 100%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
}
.nav-tabs > li {
float: none;
display: inline-block !important;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="area">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Put you parent class name before the bootstrap inbuilt classes. May b your css file is not overriding the bootstrap css file.
.area .nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.area .nav-tabs {
text-align: center;
}
Try this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">
<center>TAB 1</center>
</a></li>
<li><a data-toggle="tab" href="#tab2"><center>TAB 2</center></a></li>
<li><a data-toggle="tab" href="#tab3"><center>TAB 3</center></a></li>
</ul>
In order to centrally align the tabs you need to add the following:
.area .nav {
text-align:center;
}
.area .nav-tabs>li {
float: none;
display:inline-block;
}
https://jsfiddle.net/tghLqu24/2/ - fiddle created for you to see it working.
I have a section of code for the header portion of my website:
.nav {
position:relative;
display:inline-block;
}
#header-image {
display:inline-block;
position:relative;
height:50%;
}
.header-container {
height:6vw;
position:relative;
vertical-align: bottom;
}
<div class="header-container">
<a href='index.html'>
<img src='img/logo.png' alt="Logo" id='header-image'/>
</a>
<nav class="nav">
<ul>
<li><a href='aboutus.html'>About Us</a></li>
<li><a href='activities.html'>Activities</a></li>
<li><a href='google.ca'>Media</a></li>
<li><a href='google.ca'>Contact Us</a></li>
</ul>
</nav>
</div>
I wanted the bottom of the image to line up with the bottom of the navbar. But what's happening is that the image is lower than the navbar. Any ideas why?
Set your list items to display: inline-block;
.nav {
position: relative;
display: inline-block;
}
#header-image {
position: relative;
}
.header-container {
position: relative;
vertical-align: bottom;
}
li {
display: inline-block;
}
<div class="header-container">
<a href="index.html">
<img src='http://placehold.it/50x50' id='header-image' />
</a>
<nav class="nav">
<ul>
<li><a href='aboutus.html'>About Us</a>
</li>
<li><a href='activities.html'>Activities</a>
</li>
<li><a href='google.ca'>Media</a>
</li>
<li><a href='google.ca'>Contact Us</a>
</li>
</ul>
</nav>
</div>
.nav {
position:relative;
display:inline-block;
}
#header-image {
display: inline-block;
position: absolute;
bottom: 15px;
}
.header-container {
position:relative;
}
Use this styling settings may fill your requirements
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container