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

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless

Incorporating a JavaScript variable into an inline HTML onclick event

Having trouble passing a variable into an inline onclick function. I've tried researching and following suggestions from this link, but encountered errors (Uncaught SyntaxError: missing ) after argument list): pass string parameter in an onclick func ...

javascriptjqueryhtmlajax

Maintaining AngularJS Authentication Securengular: Ensuring

I need to find the ideal architectural solution. Below is the HTML code I currently have: <body ng-controller="individualFootprintController as $ctrl"> <div ng-hide="$ctrl.authenticated"> <h1>Login</h1> Wit ...

javascriptangularjsauthentication

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

javascriptangularjscodeignitertwitter-bootstrapcodeigniter-2

What could be causing my custom cursor to malfunction?

I've been attempting to customize the cursor image, but despite following all provided instructions, it's still not working: CSS: body, html { margin: 0px; padding: 0px; border: 1px solid red; cursor: url(images/rsz_red_crosshair.gi ...

htmlcssgoogle-chromecursorcustomization

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Having trouble using the firefox selenium plugin and sending the enter key after pasting text? The ENTER key press should not interact with any other element on the page, just a simple 'dumb' ENTER key press. error [error] Element name=code not ...

javascripthtmlseleniumweb-scrapingelement

When the button is clicked, the ng-click event will trigger the addClass function, but only on the second click

My bootstrap alert has this structure: <div id="errorAlert" class="alert col-md-6 col-md-offset-3 fadeAlert" ng-if="itemExistsAlert"> <button type="button" class="close" data-dismiss="alert">&times;</button> <p>{{alertM ...

javascriptjqueryangularjstwitter-bootstrap

Using Angular 5 to access a variable within a component while iterating through a loop

I am currently in the process of transferring code from an AngularJS component to an Angular 5 component. Within my code, I have stored an array of objects in a variable called productlist. In my previous controller, I initialized another empty array nam ...

javascriptangulartypescriptangular-components

Bootstrap: when divs cover the jumbotron

I have recently started exploring bootstrap and have been using it to build a homepage for my website. However, I am facing an issue: The three images are overlapping the jumbotron section and I can't seem to figure out why. Below is the HTML code sn ...

javascriptjqueryhtmlcsstwitter-bootstrap

When incorporating "<" or ">" into a parameter value in Angular Translate and then showcasing it in a textarea with ng-model

In my Angular Translate string, I am using a parameter that can be in the form of <test>. However, when this translate is displayed in a textarea, it shows up as &lt;test&gt; instead of <test>. Is there a way to ensure it appears correc ...

javascriptangularjsangular-translate

Internet Explorer 7 does not display icons

When I look at my icon, I'm calling it like this: <td> <i id="sthAdd" class="icn_plus"></i> </td> and the class looks like this: .icn_plus { background: url(../images/icons/plus-14x14.png) no-repeat; width: 20px; heig ...

htmlcssinternet-explorer

Guide on retrieving data parameter on the receiving page from Ajax response call

I am working on dynamically opening a page using Ajax to avoid refreshing the browser. The page opens and runs scripts on the destination page, but before running the script, I need to retrieve parameters similar to request.querystring in JavaScript. Belo ...

javascriptjqueryajaxhttp-post

Missing td data when using Beautiful Soup to parse HTML tables in Python

When attempting to extract a table using Beautiful Soup, I encounter an issue. from selenium import webdriver from bs4 import BeautifulSoup import pandas as pd import numpy as np import lxml import xlrd HorseNo = ["T421"] ...

pythonhtmlbeautifulsoup

"Encountered a roadblock while attempting to utilize the applyMatrix

I am currently working on running an animation using a JSON file and a custom JSON loader, not the one provided with three.js. Within the JSON file, there is an object called frames that contains multiple frames, each with shape information and a simulatio ...

javascriptthree.js

Creating an array dynamically by parsing a JSON object in Javascript

I am currently working with a JSON object that looks like this: var testJSON = [ { "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_c", "AssetB": "asset_d" }, { "AssetA": "asset_c", " ...

javascriptjson

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

I am attempting to make a dropdown option dependent on another using ajax. I want to view the data in the console to see if it is successful or not. I expect the data to be displayed in the console log, but instead, an error is being given. http://local ...

javascriptphpajaxlaravel

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

htmlcsstwitter-bootstrap

Implement a contact form using backend functionality in a ReactJS application

Currently, I am in the process of developing my first website using reactjs. My focus right now is on completing the contact form page, and I have already spent 2 days on it. To handle email functionality, I am utilizing nodemailer with a Gmail account tha ...

javascriptreactjsexpressnodemailer

I am encountering challenges with React.js implemented in Typescript

Currently, I'm grappling with a challenge while establishing a design system in ReactJS utilizing TypeScript. The issue at hand pertains to correctly passing and returning types for my components. To address this, here are the steps I've taken so ...

javascriptreactjstypescriptnext.jsreact-typescript

Switch up the background image of the <li> element when the <a> tag is clicked

html: <ul> <li id="Co" class="libgc" ><b>CO</b></li> <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li> </ul ...

jqueryhtmlcssanchorbackground-image