Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header.

Despite trying to set the height to 100% on various elements such as nav, ul, li, and a, nothing seems to work.

Can someone help me figure out how to make my navigation menu 100% the height of the header?

To better understand the issue, you can view this jsFiddle.

Below is the CSS code I have been using:

insert CSS here...

And here is the corresponding HTML code:

insert HTML here...
htmlcss

Answer №1

Do you like this design? I hope it's helpful! :)

header {
margin-bottom: 0px;
background: rgb(76,77,74); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(76,77,74,1) 0%, rgba(55,56,52,1) 49%, rgba(38,39,35,1) 51%, rgba(16,17,13,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4d4a', endColorstr='#10110d',GradientType=0 ); /* IE6-9 */
padding: 15px;
overflow: auto;
border-bottom: 1px solid #646562;
box-shadow:         0px 14px 50px 0px rgba(255, 255, 255, 0.20);
}

header #branding {
float: left;
        width: 25%;
}

header #branding h1 {
font-size: 30px;
font-family: ErasBold;
color: #00d6dd;
margin: 0px;
}

header nav {
width: auto;
        overflow: hidden;
height: 100%;
}
header nav ul {
list-style: none;
margin: 0;
height: 100%;
}
header nav ul li {
display: inline-block;
height: auto;
        float: left;
}
header nav ul li a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020000+0,000000+87,000000+100&0+0,0+88,0.5+100 */
background: -moz-linear-gradient(left,  rgba(2,0,0,0) 0%, rgba(0,0,0,0) 87%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00020000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
padding: 10px 25px;
        display: block;
color: #d4ff00;
border-left: 1px solid rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.4);
text-decoration: none;
font-family: ErasBold;
height: 100%;
}
<header>
    <div id="branding">
    <h1>Command Center</h1>
    </div>
    <nav>
    <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Matches</a></li>
            <li><a href="#">Servers</a></li>
            <li><a href="#">Recruiting</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

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

Using the function to show content by calling its assigned ID

<script type="text/javascript"> function selectRow(id){ $.get("http://inactive/test.php?id=" + id, function(data,status){ return data; }); } </script> <script type="text/javascript"> $("tr").click(function() { window.l ...

javascriptjqueryhtmlajax

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

csswordpress

Validation is not being applied to the radio button

Link: Issue with Form I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order Unfortunately, the script is not functioning as intended on the first link. The Java ...

jqueryhtmlcss

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

javascriptphphtmlcss

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss

Why isn't my content appearing correctly on different pages?

This ecommerce site is my very first project using React. I have created pages for Contact, Login, and more. The footer and other components display correctly on the home page, but when navigating to other pages, the content appears shortened. For referen ...

javascripthtmlcssreactjsdom

a dynamic framework that fills out several forms

I am in search of a way to streamline the data entry process for my awards database. Currently, my "people" table consists of five fields: peopleid first middle last display For example, an entry could look like this: peopleid 120 first William middl ...

phpmysqlhtmlajax

Selenium can be used to locate elements between two specific spans

I'm on a mission to locate specific text within this HTML code using Selenium <span class="value"> Receiver 1 <br> </span> Is there a way to make it more straightforward, like perhaps using span[class=value]? ...

cssselenium

Refreshing on current page with PHP [unveiling a new world of content]

My application consists of 4 pages that utilize PHP sessions. On page 1, users input their username and password, on page 2 they provide additional information, page 3 displays results and requests more details, and finally page 4 is the success page. Upon ...

phphtmlhttp-redirect

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

htmlcssbootstrap-5

Click to reveal sliding menu bar

Trying to create a sliding menu bar (.top-bar) that activates when clicking an arrow (#hide), causing the arrow to also slide up and switch from an up arrow to a down arrow. Here is my unsuccessful attempt: $(document).ready(function(){ $("#hide").c ...

jqueryjquery-uihtmlcss

What is the best way to extract both the link and text from an <a> tag that contains another element in XPath?

In a similar way to my current data (which cannot be shared due to company policy), the example below is based on information extracted from this response and this response. The aim is to extract both the text of the <a> element and the link itself. ...

pythonhtmlxmlxpath

Having trouble with jQuery scrollTop not working after loading content with ajax?

When the html content is loaded via ajax, I need to scroll to a specific element. This element has the attribute data-event-id="". However, there are instances when the variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().t ...

javascriptjqueryhtmlajax

JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly ap ...

javascriptcsshtmltwitter-bootstrap

Delete the tag that comes before

Is there a specific tag like: <p id="name" onclick="javascript:var ele=context(this);">sumtext here</p><br> <p id="name" onclick="javascript:var ele=context(this);">newtext here</p><br> <script ...

javascripthtmldom-events

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

htmlcssinternet-explorer

Dropdown menu change event malfunctioning

I am facing an issue with my HTML form that contains multiple text fields and dropdowns. I need to loop through all the dropdowns for validation purposes. Initially, only the first dropdown is visible when the page loads. The rest of the dropdowns become v ...

jqueryhtml

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

htmlcss

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

htmlcssbootstrap-4

When utilizing JavaScript within an Electron application file that is linked with a script tag in an HTML document, there may be limitations on using node modules with

While working on my Electron application, I encountered an issue with referencing a node module using require within an HTML form that includes JavaScript. Specifically, I am having trouble integrating the 'knex' node module into my code. Here i ...

javascripthtmlelectron