Position the Navbar above the Logo and ensure it stays in place when resized

How can I position the navbar over the logo so that it aligns perfectly under the letter "g"?

I want to ensure that this positioning remains consistent even when resizing the browser or viewing on different screen sizes, without impacting the content below.

The logo image should scale down to fit the screen.


https://i.sstatic.net/JOwAZ.jpg


Browser Scaled Down

https://i.sstatic.net/6FNBm.jpg


https://jsfiddle.net/jypwoaet/

HTML

<div class="container">

  <div id="logo">
    <img src="https://i.imgur.com/3SBvB3a.jpg">
  </div>

  <div id="nav">
    <ul>
      <li>
        Home
      </li>
      <li>
        About
      </li>
      <li>
        Gallery
      </li>
      <li>
        Contact
      </li>
    </ul>
  </div>

</div>

CSS

.container {
  max-width: 960px;
  margin: auto auto;
}

#logo {
  z-index: 1;
  max-width: 650px;
  margin: 2em auto;
}

#logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

#nav {
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  min-width: 400px;
  height: 50px;
  margin: -12vh auto;
  text-align: center;
  background: gray;
}

#nav ul li {
  display: inline-block;
  padding: 1em;
}

Answer №1

.container {
  max-width: 960px;
  margin: auto auto;
}

#logo {
  z-index: 1;
  max-width: 650px;
  margin: 0 auto; 
}

#logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  margin: 0 auto;
}

#nav {
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  min-width: 400px;
  height: 50px;
  margin: -16px auto 0 auto;
  text-align: center;
  background: gray;
}

#nav ul li {
  display: inline-block;
  padding: 1em;
}
<div class="container">

  <div id="logo">
    <img src="https://i.imgur.com/3SBvB3a.jpg">
  </div>

  <div id="nav">
    <ul>
      <li>
        Home
      </li>
      <li>
        About
      </li>
      <li>
        Gallery
      </li>
      <li>
        Contact
      </li>
    </ul>
  </div>
  
</div>

check this out, jsfiddle

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

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

Why does changing the order of layers in Kinetic.JS affect the color of my shapes?

Currently experimenting with Kinetic.JS, I managed to create a UFO-like shape using two parts - a red hull and a grey disc. Check out the demo on JSBin My question is: why does the color of the disc change from grey to red when I rearrange the shape orde ...

Safari showing white flash upon setting background-image src using Intersection Observer?

I've done extensive research but I'm still struggling to solve this issue. It only seems to be happening on Safari (Mac & iOS), while everything works smoothly on Chrome, Firefox, Edge, and other browsers. UPDATE: The flickering problem also per ...

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

Despite attempting the solutions provided in previous threads, none of them have been successful for me. Can someone please lend a hand with this issue? https://i.stack.imgur.com/sGRsn.png ...

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

Eliminating HTML element within CKEditor

I'm in the process of developing a CKEditor plugin and one feature I'd like to include is the ability to delete specific HTML elements from the editor's content. For example, removing an <img id="remove-me" />. I understand that I can ...

Can the autoscroll offset be adjusted while dragging?

I am developing a single-page application using Vue.js. The user interface consists of three main components: A fixed navbar at the top with a z-index of 2 A fixed sidebar on the left with a z-index of 1, and padding to accommodate the navbar A central ar ...

The custom directive containing ng-switch isn't being reevaluated when the value is updated

I have developed a unique directive that acts as a reusable form. The form includes an error message display section which utilizes ng-switch: <div ng-switch="status"> <span ng-switch-when="Error" class="text-error">An Error occurred</spa ...

Helping individuals identify the HTML5 Geolocation notification

Currently working on a website that requires users to accept the browser prompt for location sharing. Many users seem to overlook this prompt, which can lead to issues. The main problem we are facing is that each browser displays this prompt differently: ...

Choosing the Right JS Framework for an iPad HTML Prototype

Is there a quality Javascript framework available specifically for creating iPad prototypes? I've been searching but haven't found anything helpful yet. Cheers, Stefan ...

Finding and removing the last portion of the innerHTML can be achieved by employing specific techniques

Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...

Tips for creating a responsive layout to ensure that H2 achieves its optimal font size in a one-line DIV

Is there a way to ensure that an H2 headline fits within the width of a DIV element? I am looking for a solution where the font size of the H2 automatically adjusts to display its full text without overflowing or breaking into a second line inside the DIV ...

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

Tapping on content within SPAN elements with Selenium Webdriver in Java

Here is an example of what HTML code might look like: <td id="id26a" class="doclisting-name link" style="width: 319px; min-width: 319px;"> <span id="id26b" title="Document"> <span class="ie-fallback-marker"> sample text </span> ...

Unable to locate element using XPATH even though it appears in the search bar console

Currently, I am working on developing a program that fills out specific sections of a Microsoft One page. My approach involves utilizing Python and selenium for this endeavor. While I can successfully access the webpage and input data in the main section, ...

What could be causing my background image to vanish or flicker in Bootstrap?

Something unusual is happening with my website. There's a section with a static background image, and as you scroll, a quote and button (which will eventually link to a store) appear on top of it. Previously, this setup was working fine. However, yest ...

Easily transition the header's height when selecting a menu item

I am trying to achieve a collapse effect or something similar However, when I click on a menu item, the height changes too quickly without any animation What could be wrong in my code? I am looking to reference an effect similar to the one seen in the h ...

What advantages and disadvantages come with the top Java HTML parsing tools on the market?

In my search on StackOverflow and Google, I have come across a few recommended Java HTML parsers that different parties consistently suggest. However, I've had trouble finding in-depth information on the strengths and weaknesses of these libraries. I& ...

What is the process of linking a PHP file to an HTML form?

Having trouble sending emails with form data since the mailto function isn't working properly. For some reason, the php file is not connecting to the html form. When I try running index.html locally and hit submit, the browser displays php code inste ...