Trying to position searchbar in nav

Trying to position searchbar in nav - javascript

I made a nav bar, and I'm trying to add a search bar to it, but I can't seem to position it.
I'd like to have the search bar show on the right side of the nav bar without overlapping any of the other elements. I tried relative and absolute position but nothing so far.
Any help is very much appreciated, thank you! :)
Here's the codepen - version= https://codepen.io/Teamkhaleesi/pen/gOoNJJy
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html,
body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(236, 241, 236);
}
body {
margin-bottom: 0;
padding: 0;
}
.search-bar {
float: right;
width: 200px;
height: 40px;
}
.search-bar .search-icon {
position: absolute;
right: 0px;
/*adjust this*/
top: 0px;
/*adjust this*/
background-color: red;
}
nav {
width: 100%;
height: 140px;
background-color: #333;
color: #fff;
text-align: center;
}
nav p {
font-family: 'poppins';
color: white;
font-size: 40px;
line-height: 40px;
padding-top: 2%;
text-align: center;
}
nav ul {
margin: 0px auto;
display: inline-block;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: 'poppins';
text-transform: uppercase;
color: white;
font-size: 20px;
text-decoration: none;
padding: 0px 30px;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: rgb(215, 209, 209);
border-radius: 1%;
z-index: 1;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
}
nav ul li ul li a {
padding: 8px 10px;
color: black;
}
nav ul li ul li a:hover {
background-color: rgb(120, 118, 118);
transition: ease-in-out 0.2s;
}
<nav>
<p>Book PRESS</p>
<ul>
<li>Home</li>
<li>Books <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Authors <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Authors</li>
<li>Book Tours</li>
<li>Events</li>
</ul>
</li>
<li>About Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Team</li>
</ul>
<li>News</li>
</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
<li class="search-bar">
<form class="form"> <input type="text" name="Search" placeholder="Search"> <button type="submit"> </button> </form>
</li>
</li>
</nav>

I've tested your code and it already seems to be positioning the search bar to the right (I don't have enough reputation to comment so I have to reply here sorry)

Related

How to move multiple dropdown menu to right side in html?

When I remove the margin-left, margin and padding value to 0px from the root ul tag then
all menu display in the left side and the dropdown-menu size match
I want to move all menus plus dropdown-menu to right. I moved the menu to the right using margin-left, margin: 15px, and padding 15px in the root ul tag and it works but the drop-menu size isn't matching, please look up the picture.
[output of this page] [1]: https://i.stack.imgur.com/jLZnO.png
[expect output] [2]: https://i.stack.imgur.com/wvOLY.png
ul {
margin: 15px;
padding: 15px;
list-style: none;
margin-left: 50%;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>

You just need to add float:right in the css, in the ul part. Also remove the margin-left: 65%; because it will make your design unresponsive since your buttons have fixed width.
ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>

try like this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> sport </title>
<link rel="stylesheet" href="sport.css">
</head>
<body>
<ul class="menu">
<li > <a>sport</a>
<ul>
<li >football </li>
<li >soccer </li>
<li >basketbal</li>
</ul>
</li>
<li > <a>more info</a>
<ul>
<li ># </li>
<li > # </li>
<li >#</li>
</ul>
</li>
</ul>
</body>
</html>
css
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
position: relative;
}
ul li ul{
display:none;
position:absolute;
right:-200px;
top:0;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li:hover ul{
display: block;
}

ul {
margin: 0px;
padding: 0px;
list-style: none;
float:right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<html>
<head>
<style>
</style>
</head>
<body>
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
</body>
</html>
add in ul style
ul{
float: right;
}

Try this Example
Html
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
Css
ul.menu {
width: 200px;
}
ul.menu>li{
position:relative;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: right;
width: 100%;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position:absolute;
left: 200px;
top: 0px;
width:200px;
}

Use this CSS:
ul.menu{
margin: 0px;
padding: 0px;
list-style: none;
margin-left:65%;
}
ul.menu li{
float: left;
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
li {
position: relative;
}
li ul {
position: absolute;
left: 0;
margin: 0;
padding: 0;
display: block;
width: inherit;
}

Issues with using Active class in Bootstrap

Currently, the ‘Active’ class is seen on the FAQ and it creates a misleading impression Example. As of now, the hovering still exists in White. I want to achieve where An active element will be in White and display accordingly when the user clicks Example. I have provided my .html and .css, however, the provided snippet output is inaccurate. Please use your preferred software such as Visual Studio, etc. Thank you.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/mainCSS.css" />
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<!-- -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-image"></i>
Portfolio
</a>
</li>
<li class="active">
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<!-- -->
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Sidebar 1 -->
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Minimise Sidebar</span>
</button>
</div>
</nav>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
Update 1
The following result is correct https://ibb.co/phP4c8d, however how do I make it White for the remaining elements? It's something like this https://codepen.io/gearmobile/pen/bByZdG. Correct me if I'm wrong but I believe it requires a JavaScript.

i dont know if i understood your question but i think what you want is this,
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}

CSS - menu items overlapping

I have a menu with two menu items and when the user clicks on each item, a sub-menu is displayed.
The issues is both menues displayed at the same spot - under the first item. I have been tweaking it for a while but cannot figure out a way to fix the issue.
Also I need to make sure as one menu item clicked, the sub-menu for the other item disappears. Can anyone point me in the right direction?
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

For the positioning, set display: inline-block on #nav-mobile li and give it a width. In this example, I set its min-width to 5em but do what makes sense in your design.
To close the other one there’s a few options but just doing $(this).siblings().children(".dropdown-content").hide(); may be enough.
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
$(this).siblings().children(".dropdown-content").hide();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
min-width: 5em;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

Add position: relative to #nav-mobile li and left: -50px or your desired value to dropdown.
$(document).ready(function() {
$('.menu-item').on('click', function() {
$(".dropdown-content").hide();
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right!important;
}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
position: relative;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
left: -50px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin: 0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin: 0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png" />
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png" />
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

Bootstrap sidebar and page content are merged

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #eeeeee;
background-color: #eeeeee;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #eeeeee;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle

Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/

Issue on keeping Dropdown Slide Down Until Mouse is Over of Child Items

Can you please take a look at this demo and let me know how I can force the .droper to be slide down until the mouse is still over all child <li> s?
As you can see from the demo the .droper starts to slide up as soon as the mouse is out of the .menu-itemb (which make sence to me!) but I need to keep it available until user is browsing on the dropdown menu
$(document).ready(function(){
$(".menu-itemb").mouseover(function(){
$(".droper").stop().slideDown("slow");
});
$(".menu-itemb").mouseout(function(){
$(".droper").slideUp("slow");
});
});
body {
background: #1f1f1f;
}
.site-navigation {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: bold;
margin: 40px;
}
.site-navigation ul {
background: #3498DB;
list-style: none;
margin: 0;
padding-left: 0;
}
.site-navigation li {
color: #fff;
background: #3498DB;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
#include transition(background, 0.2s);
background: #52a6df;
cursor: pointer;
}
.site-navigation ul li ul {
background: #52a6df;
display:none;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #74b7e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">News</li>
<li class="menu-itemb">Snippets
<ul class="droper">
<li class="menu-item sub-menu">CSS</li>
<li class="menu-item sub-menu">HTML</li>
<li class="menu-item sub-menu">jQuery</li>
<li class="menu-item sub-menu">PHP</li>
<li class="menu-item sub-menu">WordPress</li>
</ul>
</li>
<li class="menu-item">Inspiration</li>
<li class="menu-item">Tools</li>
<li class="menu-item">Tutorials</li>
</ul>
</nav>

You are missing one .stop() before the slideUp. Without it, the animation will be triggered and executed to the end when you move the mouse between the items...
$(document).ready(function(){
$(".menu-itemb").mouseover(function(){
$(".droper").stop().slideDown("slow");
});
$(".menu-itemb").mouseout(function(){
$(".droper").stop().slideUp("slow");
});
});
body {
background: #1f1f1f;
}
.site-navigation {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: bold;
margin: 40px;
}
.site-navigation ul {
background: #3498DB;
list-style: none;
margin: 0;
padding-left: 0;
}
.site-navigation li {
color: #fff;
background: #3498DB;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
#include transition(background, 0.2s);
background: #52a6df;
cursor: pointer;
}
.site-navigation ul li ul {
background: #52a6df;
display:none;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #74b7e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">News</li>
<li class="menu-itemb">Snippets
<ul class="droper">
<li class="menu-item sub-menu">CSS</li>
<li class="menu-item sub-menu">HTML</li>
<li class="menu-item sub-menu">jQuery</li>
<li class="menu-item sub-menu">PHP</li>
<li class="menu-item sub-menu">WordPress</li>
</ul>
</li>
<li class="menu-item">Inspiration</li>
<li class="menu-item">Tools</li>
<li class="menu-item">Tutorials</li>
</ul>
</nav>

This should fix what your problems.
Fiddle
$(".menu-itemb").on('mouseenter', function () {
$(".droper").stop().slideDown("200");
});
$(".menu-itemb").on('mouseleave', function () {
$(".droper").stop().slideUp("200");
});

We Keep Coding

JavaScript is the programming language of the Web.

Trying to position searchbar in nav - javascript

I've tested your code and it already seems to be positioning the search bar to the right (I don't have enough reputation to comment so I have to reply here sorry)

Related

How to move multiple dropdown menu to right side in html?

Issues with using Active class in Bootstrap

CSS - menu items overlapping

Bootstrap sidebar and page content are merged

Issue on keeping Dropdown Slide Down Until Mouse is Over of Child Items

Categories

Resources