The use of the "position: fixed" attribute can sometimes cause certain elements

Whenever I add the style

position: fixed;

to #cssmenu

it causes the right side of the menu to disappear

Is there a way to resolve this issue? Also, can you explain why it occurs so I can avoid it in the future?

If there are multiple solutions, please provide all of them

I really need assistance with this problem

The complete code is as follows:

<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/bobbybob123/pen/pJNaqE?editors=110" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" >
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:100,100italic">

<style class="cp-pen-styles">*{
  margin: 0;
  padding 0;
}

header{
height: 100vh;
background-image: url("http://nookacorp.com/images/Screenshot%202015-05-26%20at%204.13.50%20PM.png");

width: 100%;
background-size: cover;
background-position: 50% 50%;
}
#cssmenu {
  background: #FFFFFF;
  width: auto;
  
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #499CB8;
  text-decoration: none;
  display: block;
  padding: 30px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;

<!-- The rest of the code will be omitted for brevity -->

Answer №1

Just include the rule width:100% in the #cssmenu selector to resolve the issue

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

The icons at the bottom of the page are not properly aligned

I am having trouble aligning my footer icons, specifically the first 2 images. While the bootstrap icons are centered correctly, the first 2 images are not aligning as expected. I have tried various methods like align-items-center, justify-content-center, ...

Firefox is having trouble fetching #header from style.css, but other web browsers seem to be working fine

Visit my website at http://dayforfailure.com My website appears fine on Chrome and Safari, but on Firefox the header and other elements are not displaying correctly. It seems like there may be a cross-browser compatibility issue. I am new to dealing with ...

Stunning Opening and Closing Animation with Ajax

Looking for help with creating an animation like the one shown here: Incorporating this into my current site at: dageniusmarketer.com/DigitalWonderland/ I want the window displaying text content to open and close as users navigate through the links, ess ...

Modify the Navbar color with a sticky-top effect in Bootstrap 4

For my sticky navbar, I utilized the Bootstrap 4 class sticky-top. My preference is for a CSS-based solution rather than JavaScript due to past errors encountered with JS. I aim to have my navbar change to a transparent color when it becomes sticky upon s ...

Unique layout design that organizes calendar using nested divs with flexbox - no

I am having difficulties achieving the desired outcome with my calendar header layout implemented using flexbox for the years, months, and days. What could be the issue? Is it due to the structure of the HTML or is there something missing in the CSS? The ...

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

After clicking a button, my code dynamically adds content to a div and inserts buttons with names like "teamReq_"+index+"_AddYear" into the document (where index is a number retrieved from a hidden input field). If these buttons are spammed, multiple divs ...

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data. Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly. This is how it currently appears: https://i.sstatic. ...

What is the process for choosing and making changes to a specific portion of a textContent?

<h1 id="block ">This is my header block</h1> To dynamically change the color of the "block" word every 2 seconds using JavaScript: let colors = ["blue", "green", "pink", "purple"]; let curColor = 0; const changeColor = () => { ...

Leverage the power of JavaScript to bring in a JSON file

Currently, I am working on building a website and utilizing a json file to store the necessary data for one of the pages. However, I am encountering difficulties when attempting to successfully import the data. My coding platform is repl.it. My attempts s ...

Animating the translation of a rectangle using the RequestAnimationFrame method

First of all, I have developed Live Code QUERY: How can I create an animation where a rectangle continuously moves across the X-axis? Issue: Currently, my animation only plays once and then disappears offscreen. Even though the position x is reset to z ...

Interacting with HTML5 canvas using object events

How can I assign an event handler to an element created on the HTML5 Canvas without having to manually track specific coordinates? ...

Center elements at % on the webpage using CSS styling

When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark. Here is how I am currently drawing the triangle: .arrowUp { width: 0; height: 0; border-left: 10px solid transparent; border-right ...

Is there a way to design a form that appears as though it's levitating above a div element?

I am new to web development and currently practicing by converting PSD designs into HTML pages. I am facing an issue where I need to create a form that appears to be floating on top of a div, with the form being taller than the div itself. Here is an illu ...

Incorporating mat-icons within a dropdown menu in Angular 6

I am looking to enhance a select element by inserting mat-icons representing different fruit statuses instead of displaying their names or ids. Despite my efforts, I have been unable to substitute the text with icons successfully. Methods I have attempted ...

What is the best way to divide a web page screen into three equal horizontal sections?

My goal is to split the screen into three equal sections horizontally so that I can place different images in each section. However, despite my efforts, I am encountering issues with white space and unequal division. This is my current setup: HTML: ...

Sort an HTML table based on concealed data

I've encountered a challenge with my HTML table that utilizes the Bootstrap table library for sorting data by column values. While it works smoothly for float or int data types, I have a specific column dedicated to displaying times in a string format ...

Moving the content of a div outside the browser window within an electron application

After cloning the electron quickstart app from GitHub, I noticed that it creates a browser window to display HTML content. The code snippet mainWindow = new BrowserWindow({width: 800, height: 600}) exemplifies this behavior. As I work on creating an app ...

Determine the total number of rows present in a Selenium web table

I have a web table in a page that only has one attribute, which is the class. I am trying to determine the number of rows in this table. The code below works, but it provides me with the count of all web tables that have their parent class set as OverviewT ...

Troubleshooting issues with displaying anchor tags using Jquery

I am facing an issue where I am unable to make an anchor tag visible using the .show() method in JQuery or JavaScript. The Conn Window is visible by default, and I am able to hide and display the div, but the same does not apply to the anchor tag. Interest ...

The form transmits the URL parameter rather than executing an update

I'm having trouble with my code and can't seem to figure out why it's behaving this way. When I try to update a recordset, the page reloads upon hitting the submit button and multiple URL parameters appear in the address bar. There are two ...