We Keep Coding

Trying to position searchbar in nav

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)

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;
}

New to HTML and CSS: Drop down menu not displaying

Hello I am creating a website navigation menu. I have implemented a drop down option to one of my links but it is not displaying at all. I am sure this is a simple fix that I am overlooking, any help is appreciated.
I have only included relevant HTML and CSS code. Thanks!
HTML:
<nav onmouseout="hide()">
<ul id="navMenu">
<li>Home</li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
visibility: hidden;
}
#navMenu div a {
display: block;
width: 500px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu div:hover {
display: block;
background-color: #7e8182;
}

You can do this using CSS, no need to use javaScript. Check updated snippet below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
display: none;
background-color: #7e8182;
}
#navMenu div a {
display: block;
width: 200px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu li:hover div{
display: block;
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><span>About Us</span>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>

No need if JS, just pure CSS. Hope this helps ;)
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul div
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul div li
{
float:none;
width:200px
}
nav ul div a
{
line-height:120%;
padding:10px 15px
}
nav ul li:hover > div
{
display:block
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><a>About Us</a>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>

How to make a responsive menu with simple jquery and css

I am trying a simple responsive menu with Css and jQuery. I want the jQuery script to work only on a certain window width. When I resize the browser. Here is my code.
$(document).ready(function(){
$(".resmenu").click(function(){
$(".menu").slideToggle();
});
$(".submenu").click(function(){
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
});
});
.container {
width:980px;
margin:100px auto 0 auto;
font-family:arial;
}
ul, li {
margin:0;
padding:0;
}
.resmenu {
display:none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top:28px;
display:none;
}
.menu li:hover ul {
display:block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size:14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display:none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background:#333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
It is working on 768px screen size, but when I click on the drop-down link instead of hover on more than 768 screen size, the drop down link is slide toggle. I need this script work on certain width only.

Use $(window).width() to get the width of the screen and use it in your condition:
if ($(window).width() < 768) {
// run your code here
}
See code snippet:
$(document).ready(function() {
$(".resmenu").click(function() {
$(".menu").slideToggle();
});
$(".submenu").click(function() {
if ($(window).width() < 768) {
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
}
});
});
.container {
width: 980px;
margin: 100px auto 0 auto;
font-family: arial;
}
ul,
li {
margin: 0;
padding: 0;
}
.resmenu {
display: none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top: 28px;
display: none;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (min-width:769px) {
.menu {
display: block!important;
}
}
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size: 14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display: none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background: #333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>

In css change "container" width to 100%, and set max-width to 980px.

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");
});