Incorporate a style sheet for a colorful navigation bar

I'm looking to add a colored bar below my navigation menu but I'm unsure of the correct method to do so.

What I need:

EDIT: I also need guidance on how to position the navigation menu at 50% of the height of the logo. Currently, I have used a 'static' margin-top of 20px, but I'm not sure if this is the best approach. Here's an image for reference: i.imgur.com/ApihCfJ.png

HTML

<div id="menu">  
    <ul>  
        <li><a href="/home/" title="Home">Home</a></li>  
        <li><a href="/over-ons/" title="Over ons">Over ons</a></li>  
        <li><a href="/producten/" title="Producten">Producten</a></li>  
        <li><a href="/contact/" title="Contact">Contact</a></li>  
    </ul>  
</div>

CSS

#menu  {
    margin-top:40px;
}
#menu ul {
    list-style-type: none;
}
#menu ul li {
    display: inline;
}
htmlcssnavigation

Answer №1

Check out the demo in action: http://jsbin.com/olAXoSi/2/

li {
  display: inline-block;
  width: 150px;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  margin: -5px ;
  padding: 0 15px 0 0 ;
}

.item-1 {
  border-bottom-color: red;
}
.item-2 {
  border-bottom-color: yellow;
}
.item-3 {
  border-bottom-color: green;
}
.item-4 {
  border-bottom-color: blue;
}

Answer №2

Check out this code snippet on fiddle

Styling with CSS:


#menu  {
    margin-top:40px;
}

#menu ul {
    list-style-type: none;
}
#menu ul li
{
    display: inline;
}
#menu ul li a {
    text-decoration:none;    
    color:#666;
}

#first
{
    border-bottom:2px solid blue;
}

#second
{
    border-bottom:2px solid red;
}

#third
{
    border-bottom:2px solid green;
}

#fourth
{
    border-bottom:2px solid yellow;
}

Answer №3

To achieve this effect, I recommend using the :nth-child() selector.

Here is an example of the HTML structure: ( <!-- --> eliminates white space in-line)

<div id="menu">
    <ul>
        <li><a href="/home/" title="Home">Home</a></li>
        <li><a href="/about-us/" title="About Us">About Us</a></li>
        <li><a href="/products/" title="Products">Products</a></li>
        <li><a href="/contact/" title="Contact">Contact</a></li>
    </ul>
</div>

The corresponding CSS code:

#menu ul li:nth-child(1) {
    border-bottom: 2px solid teal;
}

#menu ul li:nth-child(2) {
    border-bottom: 2px solid brown;
}

#menu ul li:nth-child(3) {
    border-bottom: 2px solid lime;
}

#menu ul li:nth-child(4) {
    border-bottom: 2px solid yellow;
}

Take a look at the Demo for a visual representation.

In addition, I made some modifications to your CSS for better appearance:

#menu ul li {
    display: inline-block;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: #2b2b2b;
    padding-right: 20px;
}

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

Enhance iframe with hover effect

I'm currently working on a unique WordPress blog design where images and iframes (YouTube) transition from monotone to color upon hover. So far, I've successfully implemented the grayscale effect for images: img { -webkit-filter: grayscale(100% ...

wordpresscssiframe

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

I have a dropdown menu that dynamically populates its options with numbers. Here is the code for that: <select name="TheServices" id="services-selector"> <option value="" disabled selected hidden>Static Select ...

javascripthtmljquery

Issues with implementation of map and swiper carousel functionality in JavaScript

I am trying to populate a Swiper slider carousel with images from an array of objects. However, when I use map in the fetch to generate the HTML img tag with the image data, it is not behaving as expected. All the images are displaying in the first div a ...

javascripthtmlarraysswiper.js

Navigating dropdown list items using the keyboard in TypeScript is a breeze

I've encountered a bug while working on my open-source project. The issue is with navigating the dropdown list items using the keyboard (arrow key/tab). I have implemented the keyboard-navigation logic, but I'm unsure of how to make it work corre ...

htmlreactjstypescriptecmascript-2016

How to change the padding of a parent element in CSS3?

I've created a circle-shaped div element using the following code: #circle{ width: 320px; height: 320px; background-image: url('image.jpg'); border-radius: 50%; background-position: 50% 50%; transition: all 1s; } This circle expands on hov ...

htmlcss

Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected. https://i.sstatic.net/yXnwA.jpg LIMITED FUNCTIONALITY ON CERTAIN BROWSERS: Currently, the X button for closing the modal works o ...

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

I am in the process of developing a Python script that assists users in Instagram engagement groups by efficiently liking everyone's photo during each round. I am facing an issue where Selenium is unable to click on the first photo when I reach a user ...

pythoncssselenium-webdriverinstagram

Class remains unaffected by media query modification

With Bootstrap5 in play and an additional stylesheet added as the last one in the lineup, my goal is to customize the margins of the .content class. The snippet of code below resides at the end of my stylesheet... .content { width: 100vw; m ...

htmlcssbootstrap-5

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within ...

javascriptjqueryhtmlcssfancybox

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

When a specific condition is fulfilled, I must retrieve a random response from a designated array

I'm looking for a way to create a system where users can select multiple items and then generate a random answer from those selected options. Currently, I have a setup that requires manual input of options in a comma-separated format, but I want to st ...

javascripthtmlarraysrandom

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

htmlajaxmodel-view-controllerrazorappend

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Currently, I am facing a challenge in animating an emoticon that was initially sketched on canvas. While following a tutorial to implement draw and clear animations using frames, I haven't been able to achieve the desired outcome. With 6 frames of the ...

javascriptjqueryhtmlanimationcanvas

Solving the right-to-left orientation issue in the Bootstrap navbar

I have implemented a navbar using the code below, which aligns well from the right side. However, the menu items are sorted in ltr order and I need them to be in rtl order, so that "Dropdown 1" starts from the right side of the page. Currently, it appears ...

htmlcssbootstrap-4

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

javascripthtmlcssinternet-explorer

How do I resolve the issue of unable to align the element correctly?

I am struggling to create a hamburger menu icon and align it using flexbox. Unfortunately, the icon is not aligning properly as it is going beyond the menu and the browser screen with an odd top indent. Below is the code I have written: * { margin: 0 ...

htmlcssflexboxposition

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react