Issues regarding the CSS navigation bar

I'm currently working on creating a navigation bar using HTML and CSS. However, I'm facing an issue where the nav-bar doesn't extend to the full width of the page as intended. I've attempted adjusting the padding-left: 0px and padding-right: 0px;, but unfortunately, it hasn't resolved the problem.

Below is a snippet of my current progress:

$banner-height: 50px;
@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';

nav {
  height: $banner-height * 2;
  position: fixed;
  width: 100%;
  top: 0;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  line-height: $banner-height;
  top: 0;
  width: 100%;
  background: #FEFFB7;
  box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.13);
}
/* More CSS code here */

The main issue being faced can be seen in these screenshots:
https://i.sstatic.net/SkfIy.png
https://i.sstatic.net/KCh0u.png
(View in full screen for better visibility).

htmlcss

Answer №1

Update: Check out the solution using snippet, flexbox, and setting padding left for the UL to 0.

Noticing some inconsistencies with the embedded snippet, so here is a link to the fiddle:

Visit the Fiddle Here

$banner-height: 50px;
@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';

nav {
  height: $banner-height * 2;
  position: fixed;
  width: 100%;
  top: 0;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  line-height: $banner-height;
  top: 0;
  width: 100%;
  background: #FEFFB7;
  box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.13);
}

nav ul#menu {
    padding-left: 0;
    display: flex;
}

// Rest of the CSS code... 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>

<body>

<nav class="nav-down">
  <div class="banner animated">I'm a banner</div>
  <div class="nav-bar">    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
        <ul id="menu" >
        <li><a href="#">Home</a></li>
        <li>
<a href="#">About</a>
        </li>
        <li>
<a href="#">Portfolio</a>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul></div>
</nav>
</body>
</html>

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

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

Elements of the user interface used for inputting an activation code

Seeking input on a usability issue I'm facing on my site. The homepage of my site has two sets of controls - one for user login and the other for new users to activate their accounts. The problem lies in the activation process. Users receive an acti ...

htmlinputusabilityuser-experience

The MinWidth property in ColumnDefinition is not functioning as expected

Currently, I am encountering an unusual issue while using a Grid in WPF (XAML) and setting the MinWidth property in a ColumnDefinition. When I have 9 ColumnDefinitions with 'Width="*"' specified for each one, and then apply the MinWidth property ...

wpfxamlgridwidthcss

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...

htmlcsstwitter-bootstrap

Keep the footer at the bottom of the screen without needing to define a 100vh in Material UI

In the process of developing my react app with MUI framework, I encountered various challenges in creating a sticky footer at the bottom of my screen. After exploring different solutions, one approach that I found most satisfactory is as follows: export de ...

javascriptcssreactjsmaterial-ui

Automotive Dealership API by Edmunds

I am having some trouble with the Edmunds API data. I can't seem to get the JSON to display when using the example code provided. It just shows up as a blank page. I am quite new to working with API's and would really appreciate some guidance on ...

jqueryhtmljson

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

Utilize Flexbox's column direction to ensure that all flex items within the same column have uniform height

Having trouble creating a responsive web page. Here are the specifics: Sharing my HTML and CSS code below: - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

htmlcssflexboxresponsive-designmedia-queries

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

htmlcssbackground

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

htmlcssmedia-queries

The flex box structure crumbles, causing the boxes to align side by side instead of in a masonry layout

I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...

htmlcssflexbox

Applying CSS to align the first line to the left and right, while ensuring that wrapped lines are aligned to the

Struggling with CSS to align drink names and descriptions on a bar's menu. Want the name left aligned and the description right aligned, even if wrapped lines are also right aligned. Current progress can be seen at http://jsfiddle.net/H96XQ/ CSS: . ...

htmlcss

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

javascripthtmlioscssmobile-safari

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

cssangularcss-selectors

Solving the Cross-Origin Resource Sharing problem in AngularJS

While using the http dependency in AngularJS and setting headers for CORS, I am encountering an error. Please check the console.log for more information on the error. The error message reads: "XMLHttpRequest cannot load . Response to preflight request doe ...

javascripthtmlangularjshttpcors

Ways to determine the current page I am viewing

I am working with a list of tabs and I need to track my current location every time I click on a specific tab. My MainCTRL controller, which is the parent of all tab controllers, needs to be aware of the active tab at any given moment. I attempted to use n ...

javascriptjqueryhtmlcssangularjs

Is it possible to use CSS to separate divs into distinct subgrids?

Is there a way to use CSS subgrids to display different divs in two columns, with all the .title's in the left column and the .card's in the right column? Here is a dynamic example for reference: https://codepen.io/dancanuck/pen/eYMLqzR body { ...

htmlcsscss-grid

Conceal and Reveal Navigation Bar

On a mobile screen, here is how my navigation bar looks: Just to clarify, I am currently only focusing on making the nav bar responsive and not other content. The stylus code for the navigation bar is as follows: -> code in stylus!!! .nav display ...

htmlmobile-websitestylus

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML scrip ...

javascripthtmljquerycss