Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below.

https://i.sstatic.net/623eH.png

As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering an issue where the items are stacking vertically instead of horizontally.

You can view the code on jsFiddle.

<header>
<div id="area-logo">
    <div class="header-ribbon"></div>
    <div class="container bg-white"></div>
</div>
<nav id="main-menu">
    <ul>
        <li id="link-a-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link a</a>

            </div>
        </li>
        <li id="link-b-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link b</a>

            </div>
        </li>
        <li id="link-c-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link c</a>

            </div>
        </li>
        <li id="link-d-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link d</a>

            </div>
        </li>
        <li id="link-e-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link e</a>

            </div>
        </li>
        <li id="link-f-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link f</a>

            </div>
        </li>
    </ul>
</nav>


    header {
    background-color: #787aad;
    height: 126px;
}

header .header-ribbon {
    height: 6px;
}

header .bg-white {
    background-color: #ffffff;
}

#area-logo {
    float: left;
}

#main-menu ul {
    margin-left: auto;
    margin-right: 0px;
    padding: 0;
    list-style-type: none;
    text-align: center;
    width: auto;
}

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

I am looking to ensure that the colored bar above each link and over the logo area have consistent sizes so that if text expands, the width will also increase accordingly.

How should I go about achieving this?

https://i.sstatic.net/kL2Yr.png

UPDATE

The updated code on jsFiddle has resolved my initial problem. However, it has revealed a rendering bug with the new Microsoft Edge browser, which adds an extra 1px to the border-top of the <li>.

https://i.sstatic.net/JYK0K.png

csshtmltwitter-bootstrap-3

Answer №1

To achieve the desired layout, change the display: inline; to display: inline-block; for the li elements in your CSS. Additionally, add a border-top: 6px solid #787aad; to each li to get the colored bar effect over each link.

In the provided CSS snippet, you can find styles for the logo area, main menu, and list items. Adjusting these styles will help you customize the appearance of your navigation bar according to your design preferences.

EDIT #1: For expanding the logo element, consider adding width: 50%; and display: block; to the #area-logo and #main-menu elements in your CSS.

Answer №2

If you want things to align properly, here is the recommended CSS to use. Instead of display: inline-block, it is advised to utilize a float in this scenario.

Check out this JSFiddle for reference: http://jsfiddle.net/vrc4qhbn/2/

header {
    position: relative;
    }
    header *,
    header *:before,
    header *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
        }

    #area-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px; /* Adjust as needed */
        }
    #main-menu {
        width: 100%;
        padding-left: 165px; /* Logo width plus spacing */
        }
        #main-menu > ul {
            float: right; /* Navigation aligned to the right */
            }
            #main-menu > ul > li {
                display: block; /* Display as block element */
                float: left; /* Align navigation items from the left */
                }

Answer №3

Make sure to incorporate this CSS snippet into your stylesheet:

#main-menu ul li {
    display: inline;
    float: left;
}

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

Is it true that nested CSS IDs function correctly in Firefox, but not in IE8?

My HTML is structured like this: <div id="content"> <div id="asection"> <h1>Some Text</h1> </div> </div> The CSS properties I'm using are as follows: h1 { color:#873C62; font-size:32px; line-heigh ...

htmlcssinternet-explorer-8internet-explorer-7

Transforming a JSON string containing multiple arrays into a JavaScript object

My JSON file is structured as follows: { "items":[ { "username":"abc", "orderID":"1234", "commentHistory":[ { "comment":"Comment Date: 2016/12/09 13:44:23" }, { ...

javascripthtmlarraysjson

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Recalling the position of the uploaded image within a v-for loop

I am struggling to solve this issue. Currently, I am utilizing Vue.js in an attempt to construct a dashboard where users can upload up to five images of visitors who are authorized to access a specific service provided by the user. Below is the code snip ...

javascripthtmlcssvue.js

Arrange the <form:radiobuttons> in a vertical position

I'm currently utilizing Spring MVC's <form:radiobuttons> to showcase radio buttons: <form:radiobuttons path="selection" items="${arraySelection}" /> The issue I am facing is that it is displaying the radio buttons in a horizontal la ...

htmlcssjspspring-mvc

Is it possible for me to insert a hyperlink that will show a PDF in a web browser without triggering a download?

I am looking for a way to allow visitors to my website to easily access and view a PDF directly in their browser by clicking on a specific URL or button. I want the PDF to be displayed within the browser itself, rather than prompting a download. Any guidan ...

htmlpdfbrowserembed

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...

phpjqueryhtmlajax

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

htmlcss

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Using JavaScript Object Constructor to alter text color

Seeking some guidance as a newbie here on how to deal with a problem I'm currently tackling. I understand that using an object constructor may not be the most efficient way to handle this, but I'm eager to enhance my knowledge of objects. My quer ...

javascriptjqueryhtmlcssobject

Incorporating Blank Class into HTML Tag with Modernizr

Currently, I am experimenting with Modernizr for the first time and facing some challenges in adding a class to the HTML tag as per the documentation. To check compatibility for the CSS Object Fit property, I used Modernizr's build feature to create ...

javascriptcsscross-browserfrontendmodernizr

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Using AngularJS and the ng-show directive, you can set a <div> element to

Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default If I have this code snippet: <html> <head> <script src="https://ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlcssangularjs

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

javascriptjqueryhtmlcss

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

Exploring ways to create additional file upload fields with distinct names through JavaScript

My latest project involved creating a button that allows users to add a file upload field, a separate button to remove a file upload field, and a counter to keep track of the total number of file upload fields. However, it appears that the fields are not b ...

javascripthtmldomform-fields

What is the method for copying table data, including input text as cells, to the clipboard without using jQuery?

I have a basic table that looks like this: <table> <thead> <tr> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>Savings <button type="button" (click)=" ...

javascripthtmlangulartypescript

Is it possible for jcarousel to interact with a database as well?

Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel. css js Currently ...

javascriptcssasp.netc#-4.0jcarousel

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

javascriptphphtmlvue.jsvue-component

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

Incorporating VS 2017 and bootstrap 4.1.1 into an MVC 5 page, I am facing a challenge in adding right-side padding to an image without distorting the circular shape of the image, as shown below. When I apply the padding, the circle becomes warped, but remo ...

c#asp.netcssasp.net-mvc-5bootstrap-4