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:

And for the second menu item to appear as follows when hovered over:

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

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

javascriptjqueryhtmlcss

Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question. I am looking to create a layout where the center content stretches out to cover the entire visi ...

javascriptjquerycsshtml

What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

I'm currently facing an issue where I'd like to center align all tables similar to the 'Ruby Table.' However, I'm unsure of how to achieve this. You may also observe that some tables have varying widths. What CSS rule can I apply ...

htmlcsshtml-table

The margin-bottom property does not cause the element to shift or re

Need help with creating a 3-line effect using div and before/after selectors. When applying margin-top in the after selector, the line moves down properly. However, when trying to move the line up using margin-bottom in the before selector, it's not w ...

htmlcss

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Is there a way to display only 5 images from a list on the first load, and then show all images when the user clicks on "load more"? Here is the code I have: $('.photos-list').hide(); $('.photos-list').slice(1, 5).show(); $ ...

javascripthtmljquerycss

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

cssangularmapboxmapbox-gl-js

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy? CSS #nav-list { list-style-type: none; background-repeat: no-repeat; background-image:url("../_img/Footersprite.png") } #nav-list li, #nav-footer a { height: 40 ...

htmlcss

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...

htmlcssradio-button

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

While experimenting with the boilerplate template, I encountered an unusual issue when attempting to use TypeScript with the default NextJS configuration. The problem arose when changing the file extension from .js to .tsx / .tsx. Various versions of NextJ ...

csstypescriptnext.js

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

javascripthtmlcssangularionic-framework

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

htmlcsstwitter-bootstrapbootstrap-5card

Positioning a button on the side of the screen while a hidden side panel is open

I am attempting to create an animation using a side panel that will slide into view when a button is clicked. Here is how it appears when the page loads: When the user clicks on one of the buttons, the notes panel will become visible like this: This is ...

jqueryhtmlcssjquery-uisass

Issue with the pluses and minuses in the Bootstrap accordion

Can someone explain why the panel-header displays all "-" instead of "+"? When I click on the panel, it changes all "-" to "+". This happens consistently, not just the first time the page loads. My CSS code: .panel-heading a:after { font-family: &ap ...

htmlcsstwitter-bootstrap-3

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

javascriptjqueryhtmlcssz-index

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...

javascriptcssgulpuncss

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Is there a way to hide the horizontal lines and timeslots in the table below without affecting the vertical lines? I attempted to use the visibility property on the td elements, but it hides both sets of lines. Any suggestions on how to resolve this is ...

htmlcssreactjsmaterial-ui

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

javascripthtmlcssbootstrap-4jquery-chosen