I am working on a navigation bar using HTML, CSS, and JavaScript.
I already codes it and I set the display of the bar to fixed
then I noticed that the content of the page is now overlaying the nav bar
. Attached is the screenshots of the code as well as the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AlmaTech</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
* {
font-family: 'Signika Negative', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
border-radius: 5px;
}
.brand {
font-family: 'Caveat', cursive;
font-family: 'Cute Font', sans-serif;
}
.nav-bar-container {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
padding: 10px 40px;
box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
background: #e7e7e7aa;
position: fixed;
}
.nav-bar-middle {
display: flex;
gap: 30px;
}
.nav-bar-middle li {
list-style: none;
font-size: 20px;
}
.nav-bar-middle-items {
display: flex;
gap: 30px;
}
.content {
position: absolute;
}
.nav-bar-side {
position: sticky;
transition: all 0.5s ease-in-out;
background: #e7e7e7ad;
display: flex;
align-items: space-between;
justify-content: flex-start;
width: 150px;
display: none;
/* border-top-radius:0;
border-right-radius:0;
border-left-radius:0;
border-bottom-radius:0; */
/* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
border-radius: 0 0 10px 0;
box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
flex-direction: column;
margin-top: 0;
}
.nav-bar-side ul li {
padding-top: 20px;
}
.nav-bar-side ul li {
list-style: none;
}
#menuIcon {
display: none;
}
.show {
display: block;
position: sticky;
background: #e7e7e7ad;
display: flex;
align-items: space-between;
justify-content: flex-start;
width: 150px;
}
.rotate {
transform: rotate(-90deg)
}
@media(max-width:900px) {
#menuIcon {
display: none;
}
#accountIcon {
display: none;
}
}
@media(max-width:800px) {
#menuIcon {
display: block;
}
.nav-bar-middle {
display: none;
}
}
</style>
</head>
<body>
<div class="body">
<div class="nav-bar-container">
<div class="nav-bar-logo">
<h1 class="brand">AlmaTech</h1>
</div>
<div class="nav-bar-middle">
<ul class="nav-bar-middle-items">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Services</li>
<li>Achievements</li>
</ul>
</div>
<div class="nav-bar-right">
<i class="fa-solid fa-bars" id="menuIcon"></i>
<i class="fa-solid fa-user" id="accountIcon"></i>
</div>
</div>
<div class="nav-bar-side">
<ul class="nav-bar-side-items">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Services</li>
<li>Achievements</li>
</ul>
</div>
</div>
<div class="content">
brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci
</div>
<script>
const navIcon = document.querySelector('#menuIcon');
const navSide = document.querySelector('.nav-bar-side');
navIcon.addEventListener('click', toGGle);
function toGGle() {
navSide.classList.toggle('show');
navIcon.classList.toggle('rotate');
}
</script>
</body>
</html>
I have tried lot of values but I haven’t seen a helpful one
3
Answers
You can use z-index. Here, I set it to 9999.
Simply add
z-index: 99
(or any number higher than1
) to the.nav-bar-container
element.Also, if you’re concerned about opacity of the
nav-bar-container
remove theaa
at the and of thebackground
property:#e7e7e7
Baiscs first!!, move the content inside of the body and set top to the content. You can change that based on the screen resolution. Change the bg for the side nav as well