What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting overflow to hidden, the problem persists. I aim to keep the navbar at the bottom of the image consistently across all screen sizes. For a better understanding, you can refer to this jsfiddle: https://jsfiddle.net/Montinyek/4dbf5p9e/1/


body, html {
  height: 100%;
  margin: 0;
  padding:0;
  font-family: Times, Times New Roman, serif;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
  height: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f2f2f2;
}


h1 {
  padding: 80px 60px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
}

.nav-container {
  display: inline-block; 
  position: relative;
  top: 87%;
}

.navbar {
  overflow: hidden;
  height: 100px;
  display: inline-flex;
  gap: 70px; 
  align-items: center;
  justify-content: center;
  width: 99vw;
  
}

.navbar a.main {
  color: #f2f2f2;
  padding-left: 47px;
  padding-right: 47px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  text-decoration: none;
  font-size: 20px;
  margin: 0px;
  transition: all 0.3s;
  display: block; 
}


.navbar a.main:hover  {
  background-color: #ddd;
  transform: scale(1.3);
  color: black; 
}

.dropdown-content {
  visibility: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 64.6%;
  top: 80%;
  border-radius: 5px;
  background-color: black;
  min-width: 160px; 
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  z-index: 1;
  transition: all 0.5s;
  
}

.dropdown-content a {
  float: none;
  color: #ddd;
  padding: 12px;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: all 0.5s;
  font-size: 1.5rem;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


</style>
<body>


  <div class="hero-image">
    <div class="hero-text">
        <h1 style="font-size:50px">Welcome</h1></div>
        <div class="nav-container">
          <div class="navbar">
            <a class="main" href="#home">Home</a>
            <a class="main" href="#mission">Mission</a>
            <a class="main" href="#news">Contact</a>
            <div class="dropdown">
              <a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
              <div class="dropdown-content">
                <a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
                <a href="./index7.html">Travel</a>
                
              </div>
            </div> 
          </div></div>
      </div>

      
    
</body>
</html></questionbody>
<exquestionbody>
<div class="question">
                
<p>To address the issue of the overflowing navbar content over the parent image on different screen sizes, I made adjustments and changes in the code base. The following is the updated version with enhanced responsiveness:<a href="https://codepen.io/christian2033/pen/rNYPwWK" rel="nofollow noreferrer">Demo Link</a></p>
<p>HTML:</p>
<pre><code>    <div class="hero-image">
      <div class="hero-text">
        <h1 style="font-size:50px">Welcome </h1>
      </div>
      <div class="navbar">
         <a class="main" href="#home">Home</a>
         <a class="main" href="#mission">Mission</a>
         <a class="main" href="#news">Contact</a>
         <div class="dropdown">
            <a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
               <a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
               <a href="./index7.html">Travel</a>
            </div>
         </div>
      </div>
   </div>

CSS:

        body,
html {
   height: 100vh;
   margin: 0;
   padding: 0;
   font-family: Times, Times New Roman, serif;
}

.hero-image {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
      url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
   height: 80vh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   overflow-x: hidden;
}

.hero-text {
   display: flex;
   justify-content: center;
   text-align: center;
   width: 100%;
   color: #f2f2f2;
}

.hero-text h1 {
   padding: 80px 60px;
   border: 1px solid #f2f2f2;
   border-radius: 5px;
}

.navbar {
   overflow: hidden;
   height: 120px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
   max-width: 100vw;
   width: 100%;
}

.navbar a.main {
   color: black;
   padding-left: 47px;
   padding-right: 47px;
   padding-top: 10px;
   padding-bottom: 10px;
   border: 1px solid black;
   border-radius: 5px;
   text-decoration: none;
   font-size: 20px;
   margin: 0px;
   transition: all 0.3s;
   display: block;
}

.navbar a.main:hover {
   background-color: #ddd;
   transform: scale(1.3);
   color: black;
}

.dropdown-content {
   visibility: none;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   left: 64.6%;
   top: 80%;
   border-radius: 5px;
   background-color: black;
   min-width: 160px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
      rgba(0, 0, 0, 0.22) 0px 10px 10px;
   z-index: 1;
   transition: all 0.5s;
}

.dropdown-content a {
   float: none;
   color: #ddd;
   padding: 12px;
   text-decoration: none;
   display: block;
   text-align: center;
   transition: all 0.5s;
   font-size: 1.5rem;
}

.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}
javascripthtmljquerycss

Answer №1

It's possible that I may have misunderstood your concern, but after making some slight adjustments, I was able to achieve this outcome demo

HTML:

    <div class="hero-image">
      <div class="hero-text">
        <h1 style="font-size:50px">Welcome </h1>
      </div>
      <div class="navbar">
         <a class="main" href="#home">Home</a>
         <a class="main" href="#mission">Mission</a>
         <a class="main" href="#news">Contact</a>
         <div class="dropdown">
            <a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
               <a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
               <a href="./index7.html">Travel</a>
            </div>
         </div>
      </div>
   </div>

CSS:

       body,
html {
   height: 100vh;
   margin: 0;
   padding: 0;
   font-family: Times, Times New Roman, serif;
}

.hero-image {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
      url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
   height: 80vh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   overflow-x: hidden;
}

.hero-text {
   display: flex;
   justify-content: center;
   text-align: center;
   width: 100%;
   color: #f2f2f2;
}

.hero-text h1 {
   padding: 80px 60px;
   border: 1px solid #f2f2f2;
   border-radius: 5px;
}

.navbar {
   overflow: hidden;
   height: 120px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
   max-width: 100vw;
   width: 100%;
}

.navbar a.main {
   color: black;
   padding-left: 47px;
   padding-right: 47px;
   padding-top: 10px;
   padding-bottom: 10px;
   border: 1px solid black;
   border-radius: 5px;
   text-decoration: none;
   font-size: 20px;
   margin: 0px;
   transition: all 0.3s;
   display: block;
}

.navbar a.main:hover {
   background-color: #ddd;
   transform: scale(1.3);
   color: black;
}

.dropdown-content {
   visibility: none;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   left: 64.6%;
   top: 80%;
   border-radius: 5px;
   background-color: black;
   min-width: 160px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
      rgba(0, 0, 0, 0.22) 0px 10px 10px;
   z-index: 1;
   transition: all 0.5s;
}

.dropdown-content a {
   float: none;
   color: #ddd;
   padding: 12px;
   text-decoration: none;
   display: block;
   text-align: center;
   transition: all 0.5s;
   font-size: 1.5rem;
}

.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Variables within my .env Configuration

Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...

javascriptnode.jsenvironment-variables

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael

Trigger a function when a button is clicked

This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...

javascripthtmlonclick

The anonymous function in the Google strategy is not being executed

I am currently working on implementing Passport to allow users to log in to my website using their Google accounts. I am utilizing yarn along with the following relevant packages: [email protected], and passport-google-oauth20@^1.0.0. The issue I am f ...

javascriptexpressauthenticationpassport.jsgoogle-authentication

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay

One of my challenges is implementing a custom element that captures user input upon clicking, focusing on it and overlaying other elements. I want the overlay to disappear if the user clicks outside the div. I attempted to achieve this using the iron-over ...

javascripttypescriptpolymeroverlaypolymer-2.x

Problem with Chrome Compatibility for Bootstrap Carousel

My webpage features a carousel implemented as a slider. It seems to be working fine in Firefox and mobile browsers, except for Chrome where it doesn't show up at all. I can't seem to figure out what's causing the issue. Here is the syntax I& ...

javascriptjqueryhtmlcsstwitter-bootstrap

The server is unable to process the .get() request for the file rendering

Struggling with basic Express routing here. I want the server to render 'layout2.hbs' when accessing '/1', but all I'm getting is a 304 in the console. Here's the error message: GET / 304 30.902 ms - - GET /style.css 304 3.3 ...

javascriptnode.jsexpressrouteshandlebars.js

Guide to showing the username on the page post-login

My MongoDB database is filled with user information. I'm looking to create a feature on the webpage that displays "Logged in as username here" at the top once users log in. My CSS skills are strong, but when it comes to JavaScript, I'm struggling ...

javascriptnode.jsmongodbexpresshandlebars.js

Loop through an array of objects in Node.js using ng-repeat

I have integrated angularJS with a node back-end that transmits data using socketio. When I attempt to display the data using ng-repeat, I encounter an issue. If I set the initial data within the controller, ng-repeat functions properly. However, if I add ...

javascriptnode.jsangularjssocket.io

What strategies can I use to ensure that I can successfully send 3,000 requests to the Google Drive API using node.js without surpassing

I'm currently assisting a friend with a unique project he has in mind. He is looking to create 3000 folders on Google Drive, each paired with a QR code linking to its URL. The plan is to populate each folder with photos taken by event attendees, who ...

javascriptnode.jsgoogle-api-nodejs-client

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

Find my resume project on GitHub at https://faizan-ul-hasnain.github.io/Resume-Project-/ and let me know how to improve it. Visit my resume project here ...

htmlcss

What's causing this failed request in jQuery Deferred to unexpectedly resolve?

Trying to handle two AJAX deferreds, with a success message if both succeed and an error message if one fails. Check out the simplified code: var reqs = $.map(['file', 'db'], function(mode) { $.get(wspath(desyn.repo_id, 'rever ...

jqueryajaxcallbackjquery-deferred

Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

Can Vue allow for the addition of v-on events on strings included in v-html? In this scenario, clicking the 'Maggie' link doesn't produce any action. It appears that it's not recognized by Vue. Is there an alternative method to achieve ...

javascriptvue.jsvuejs2

Utilizing Vue JS to showcase a pop-up block when hovering over a specific image

There are four images displayed, and when you hover over each one, different content appears. For example, hovering over the first image reveals a green block, while hovering over the second image reveals a blue block. However, the current logic in place i ...

javascriptvue.jsoptimizationvuejs2

manipulating session variables with javascript ajax and php

I'm struggling with setting and retrieving session variables using JavaScript code that calls PHP functions via AJAX. I want to access the returned session field in my JavaScript, but nothing seems to be working. Can someone take a look at my code and ...

javascriptphpajaxvariablessession

Setting up Webpack for react-pdf in a Next.js application

In my Next.js application, I am utilizing the react-pdf library to generate and handle PDF files on the client side without involving the server. However, I am facing challenges in setting up Webpack for Next.js as I lack sufficient expertise in this area. ...

javascriptreactjstypescriptwebpacknext.js

Managing errors in React Router on the server-side

I am currently working on an isomorphic application using react-router and express. My goal is to implement custom error pages that will be displayed in case of server-side errors, rendering errors, or when a page is not found. However, I am facing difficu ...

javascriptexpressreactjsreact-router

Node.js async.each triggers the error message "Callback has already been invoked"

I seem to be facing a problem that I can't pinpoint despite searching for mistakes extensively. The issue arises when async.each throws a "Callback was already called" error. Below is the code snippet where I encounter this problem: async.each(this. ...

javascriptnode.jsasynchronouscallback

customizing highcharts title within a popup window

Is there a way to dynamically set the title of a Highcharts chart from an element? Check out my code snippet below: $(function () { var chart; $('#second-chart').highcharts({ chart: { type: 'bar' }, subtitle: { ...

javascriptjqueryhighcharts