Why isn't the alignment and background color of my navigation menu (nav) functioning properly?

Having trouble with my navigation styling - the alignment and background color only show up when I remove the closing brace for the "nav" CSS. I have 2 different CSS stylings in place to center the nav items and add a background color, but something's not quite right.

nav {
  text-align: center;
  background-color: gray;
}

.navbar {
  font-family: Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}
...

<nav class="navbar">
  <a class="current" href="#">Home</a>
  <a href="articles.html">Articles</a>
  <a href="teamreports.html">Team Reports</a>
  <a href="#">Team Compendium</a>
  <a href="#">Resources</a>
  <a href="#">Events</a>
</nav>
<br />
<div>
  <p>Sample text goes here.</p>
</div>

Learning HTML and CSS can be tricky, but by recreating existing websites, you can improve your skills and eventually create your own unique designs.

htmlcss

Answer №1

Your navigation bar element has floating elements inside it, which means that by default, they will not affect the height of the parent element. This results in the nav bar not adjusting its height to accommodate the floated elements and appearing to have a height of 0. To fix this issue, you can add overflow: auto; to the nav bar.

nav {
  text-align: center;
  background-color: gray;
  overflow: auto;
}

.navbar {
  font-family: Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

.navbar a {
  text-decoration: none;
  text-align: left;
  float: left;
  border-bottom: 2px solid;
  padding: .25em 4em 0em 1em;
  color: black;
}

.navbar a:hover {
  cursor: pointer;
  background-color: black;
  color: white;
  border-bottom: 2px black solid;
  transition: background-color .25s linear, color .25s linear;
}

.navbar .current {
  background-color: black;
  border-bottom: 2px black solid;
  color: #ff2c7b;
  position: relative;
}

.current::before {
  content: "";
  display: block;
  width: 0;
  border: 10px solid black;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}
<nav class="navbar">
  <a class="current" href="#">Home</a>
  <a href="articles.html">Articles</a>
  <a href="teamreports.html">Team Reports</a>
  <a href="#">Team Compendium</a>
  <a href="#">Resources</a>
  <a href="#">Events</a>
</nav>
<br />
<div>
  <p>Sample text goes here.</p>
</div>

Answer №2

Try including the overflow: hidden property in your styles for the nav element:

nav {
  text-align: center;
  background-color: gray;
  overflow: hidden;
}

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

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

javascripthtmlcss

Navigating the FormSpree redirect: Tips and tricks

I recently set up my website on Github Pages and wanted to integrate a free contact form from FormSpree. However, I encountered an issue where after submitting the form, it redirected to a different website, which was not ideal. After researching online, I ...

javascripthtmlforms

What is the procedure for altering a particular element using ajax technology?

I have an AJAX request that updates the user information. I need to retrieve a specific value from the response and update the content of a specific element. For example, here is the element that needs to be changed: <div id="changeMe"><!-- New ...

javascriptjqueryhtmlajax

rearrange the div elements by shifting each one into the one preceding it

Do you consider this a child and parent div relationship? <div class="container"> <p>content</p> </div> <div class="footer"><p>content</p></div> <div class="container"> <p>content</p> < ...

jqueryhtmlappend

Implement the Vue.js @click directive in a location outside of an HTML element

I've set up a link like this: <a href="#" @click="modal=true">Open modal</a> Here's the data setup: export default { data () { return { modal: false } } } Is there a way to trigger the cli ...

javascriptjqueryhtmlvue.jsvuejs2

The navigation bar at the top of the page is causing content to be blocked on mobile screens, but not on desktop screens

My Fixed-Top navbar is causing an issue on mobile screens, as it is covering the top content of the page. This problem doesn't occur on PC screens. When I resize the browser width to fit a mobile screen, the navbar overlaps with the body content... &l ...

htmlcssnavbarbootstrap-5fixed

Differentiating CSS Styles for Odd and Even Table Elements

I am trying to implement a style where every other row in my table (myrow) has a different background color. However, currently it is only showing the color specified for odd rows. .myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow: ...

htmlcss

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

htmlcssnavbarsticky

Removing a CSS class using JQuery

Within my website layout, I have a div that is dynamically included using PHP. This div is inserted in two different locations, each inside its own parent div. <div id="parent_div"> <div id="contact_details_div" class="contact_details_div sam ...

javascriptjquerycss

"Using jQuery to dynamically change the src attribute of an iframe, the change persists even after

There's a strange issue bothering me. On a single page, I have a menu and an iframe. Whenever I click on a menu button, the jQuery code changes the src attribute of the iframe. Initially, when the page loads, the iframe is supposed to display "Home". ...

jqueryhtmliframe

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

javascripthtmlangulartypescripthtml-table

Customize the Vuetify 2.0 sass variable $heading-font-family

I'm currently trying to customize the default variable $heading-font-family in Vuetify 2.0.0-beta.0, but I'm encountering issues with this particular override. Oddly enough, I have been successful in overriding other variables such as $body-font- ...

cssvue.jssassvuetify.js

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

javascripthtmljqueryjson

Scouring through the text to find a specific word and bring it to the forefront

I need help creating a PHP script that can analyze a text input, which could be an extensive essay, and search for a specific word entered by the user. The script should display the entire text with the searched word highlighted whenever it is found. < ...

phphtml

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Having trouble deleting element despite having the correct ID?

Whenever I click on the map, it adds an element to the map div using this line of code: $('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng ...

javascriptjqueryhtml

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Currently utilizing CSS modules within a create-react-app project and encountering an error within Google Chrome browser: https://i.stack.imgur.com/0ItNM.png However, the error appears to be related to eslint because I am able to close the warning modal i ...

cssreactjsreact-css-modules

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss