Issues with a top navigation bar

I'm currently working on customizing a header menu to my liking but have limited experience with CSS.

The header menu consists of two main items, each with a dropdown. I envision the first menu item to look like this upon hover: https://i.sstatic.net/UXJP8.png

And for the second menu item to appear as follows when hovered over: https://i.sstatic.net/Zqq2L.png

Note: It is important for "Menu 1" and "Menu 2" to be positioned exactly as shown in the images, with the Dropdown for Menu 1 located to the right of Menu 1 and the dropdown for Menu 2 placed to the left of Menu 2. Additionally, there should be a central "Logo" element.

You can view what I've accomplished so far in this fiddle (check it out here).

I am facing two issues:

  • The width of the menu items is not 100%. I aimed for each menu item to occupy 25% of the space and have a logo-div at the center filling up the rest (with margin: auto) to make it altogether 100%.
  • When hovering, the active main menu item gets pushed down.

How can I resolve these issues to achieve the desired functionality?

add CSS code snippet here
HTML code snippet here

css

Answer №1

I have made some updates to your fiddle to show you a possible solution.

Check out the updated JSFiddle here

Although it may not be the most efficient method, I was able to make these changes quickly in about 10 minutes. This should give you a starting point for further development.

The main issue seemed to be the lack of separate classes for your h3 elements:

<h3 class="right">

I hope this information helps you with resolving your issue :).

Answer №2

Here are a few things to do:

  1. Apply the style position: relative to .nav.
  2. Set position: absolute for .nav ul.

Now, let's take a look at the code snippet below:

body {
  margin: 0px;
}
.header {
  background-color: royalblue;
  width: 100%;
  margin-bottom: 1em;
  height: 3.15em;
  color: green;
  box-shadow: 0px 0px 5px black;
}
.nav h3 {
  display: inline-block;
  margin-left: 0.3em;
}
section {
  display: inline-block;
}

.nav:first-of-type h3 {
  text-align: right;
}

.nav ul {
  display: inline-block;
  padding: 0;
  top:36px;
  list-style-type: none;
  width: 15em;
  margin-top: 4em;
  display: none;
}

.nav:nth-of-type(2) ul {
  text-align: right;
}

.nav:hover ul {
  display: inline-block;
}

.width-25 {
  width: 25%;
}

.fill-width {
  margin: auto;
}

}
.nav:first-of-type h3 {
  text-align: right;
}
.nav ul {
  display: inline-block;
  padding: 0;
  top: 36px;
  list-style-type: none;
  width: 15em;
  margin-top: 4em;
  display: none;
}
.nav:nth-of-type(2) ul {
  text-align: right;
}
.nav:hover ul {
  display: inline-block;
}
.width-25 {
  width: 25%;
}
.fill-width {
  margin: auto;
}
.nav {
  position: relative;
}
.nav ul {
  position: absolute;
}
<div class="header">
  <section class="nav">
    <h3 class="width-25">Toolbox</h3>
    <ul>
      <li><a href="/es6" class="menu-link">ECMAScript 2015 (ES6)</a></li>
      <li><a href="/typescript" class="menu-link">TypeScript/ES7</a></li>
      <li><a href="/obserables" class="menu-link">Observables</a></li>
      <li><a href="/build" class="menu-link">Building/Deploying</a></li>
      <li><a href="/components" class="menu-link">Components</a></li>
      <li><a href="/testing" class="menu-link">View/Input Data</a></li>
    </ul>
  </section>
  <span class="fill-width"></span>
  <section class="nav">
    <ul>
      <li><a href="/forms" class="menu-link">Forms</a></li>
      <li><a href="/pipes" class="menu-link">Pipes</a></li>
      <li><a href="/services" class="menu-link">Services</a></li>
      <li><a href="/directives" class="menu-link">Directives</a></li>
      <li><a href="/di" class="menu-link">Dependency Injection</a></li>
      <li><a href="/testing" class="menu-link">Testing</a></li>
    </ul>
    <h3 class="width-25">Angular&nbsp;2</h3>
  </section>
</div>

<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

Answer №3

To resolve the problem of the active menu getting pushed on hover, it is necessary to switch the position of the <ul> element to absolute.

position: absolute;

For a demonstration, refer to this revised version of the code on jsFiddle.

Could you clarify what you mean when you say that the width is not 100%?

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

How come my donut graphs are sitting outside the box while all other types of charts are properly aligned?

I am encountering an issue with my charts where all of them are positioned in the center of a div when drawn by the user, except for the donut charts. They seem to be placed outside of the top-left corner instead. Can anyone provide insights as to why this ...

javascriptjquerycssd3.js

Guide to altering the color of the row that is clicked in a table using css and jquery

Is there a way to change the text color of a row in a table when it is clicked, similar to an example like this but without changing the background color? The code I have tried is not working for me. Below is a snippet of the code I am using: $("#myTab ...

javascriptjqueryhtmlcsshtml-table

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

htmlcssselect

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass

Are you experiencing empty boxes instead of Glyphicons in Bootstrap 3?

Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly. For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree ...

cssangulartreeangular-material

The GMaps API v3 is currently being loaded, but is not displaying on the webpage

Although the maps are supposed to be loading, I'm having trouble actually seeing them appear. Troubleshooting function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLat ...

htmlcssgoogle-mapsgoogle-maps-api-3

Utilizing external Cascading Style Sheets in AngularJS 1

Can an external CSS be applied to a component in AngularJS1? If yes, then how can it be done? I have only seen examples of applying inline css... ...

cssangularjs

Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop. <Typography variant='h1' align='center' sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }} > ...

cssreactjsmaterial-ui

Styles for Django Rest Framework admin interface are not displaying correctly

Has anyone else experienced an issue with the styling in their Django admin panel? The CSS appears to be functioning properly, but once you navigate to a specific model, the layout becomes distorted. I can't seem to figure out what could be causing th ...

pythoncssdjangodjango-rest-framework

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

htmlcssresponsive-design

How to vertically center text with button label in Bootstrap 4

I have a simple objective: I want to align a line of text to the left and a button to the right, with the text vertically aligned to the button's label. I've tried adjusting padding and margins without success. I feel like there must be an easy s ...

htmlcsstwitter-bootstrapbootstrap-4

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Utilizing version 4 of Bootstrap to create a visually appealing full

I am currently using the latest version of bootstrap, but I have encountered an issue with my sidebar being too short and not reaching full height. You can view the problem here: Is this problem caused by my CSS or is it a bootstrap issue? And how can ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Efficiently utilizing CSS classes

My dilemma involves styling a textfield in two different locations on my website, each with its own parent element. The second location requires an additional margin-top that the first does not. What is a clever way to adjust the original margin-top withou ...

htmlcss

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js

Adjust the text input width appropriately for the cloze exercise

My JavaScript-generated fill-in-the-blank text is causing me trouble when it comes to adjusting the size of the input boxes. Unlike others, I know exactly what the user will or should be entering. If there is a blank space like this _______________, I wa ...

htmlcsstextbox

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator