Is it possible to have evenly spaced divisions within a fixed wrapper?

I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far:

<style>
.sticky-nav-wrapper > div
  {
    color: #000000;
    display: inline-block;
    display: -moz-inline-box;
    *display: inline;
    zoom: 1;
    width: 33%;
    text-align: center;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
  }

</style>
<div class="sticky-nav-wrapper">
  <div>TEST</div><div>TEST2</div><div>TEST3</div>
</div>

This setup will produce a block like the one shown above.

However, when I attempt to set the position of sticky-nav-wrapper to fixed, the elements get crowded on one side:

So, my question is how can I maintain even spacing while keeping the navbar fixed at the top?

htmlcss

Answer №1

Your approach is on the right track, but you may need to reconsider your positioning strategy. It's essential to assign a fixed position to the parent element and then apply an inline display to the child elements. This will ensure that they align horizontally instead of stacking vertically. Consider using a ul for the menu within the sticky wrapper and li for each child element, unless divs are necessary. Below is a demonstration showcasing both scenarios: your adjusted version and my version with UL LIs.

Take a look at the DEMO

.sticky-nav-wrapper2 {
   color: #000000;
   width: 100%;
   text-align: center;
   z-index: 50;
   background: #ccc;
   position:fixed;
   top:35px; /* Remove this*/    
}
.sticky-nav-wrapper2 ul li{
   list-style-type: none;
   width: 33.3%;
   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

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

htmlcss

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

javascriptjqueryhtmlcss

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer <svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;"> <defs> <g id="icon-image"> <path class="path1" d="M0 4v26h32v ...

htmlcsssvg

JavaScript: a single function and two calls to Document.getElementById() results in both returning "undefined"

Within my JavaScript file, I have a function that utilizes two variables: choice and courseChosen. The latter variable must be converted into an object first. In the HTML, the tags courseName and courseInfo are used for choice and courseChosen respectively ...

javascripthtmljsonfunctiontags

Attention! Are you aware of the potential consequences of the impending phase-out of the name attribute in W3C validation? Have you considered how this development

Any thoughts on what could replace the name attribute? According to the W3C validator... Validation Output: 4 Warnings Here is a list of the warning message(s) generated while checking your document. Warning Line 12, Column 21: The name attribute i ...

phphtmlattributesw3cw3c-validation

Move your cursor over one container to see the impact on another

My goal is to create a hover effect on a box that triggers another div with easing effects. Below, you'll see that the .images{} class has a 0s infinite scroll initially, but when the .box:hover > .images{} selector is activated, it changes to a 10 ...

cssanimationhover

Creating a FusionCharts time series with a sleek transparent background

Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...

cssreactjssvgfusioncharts

CommentsController#new encountered a NoMethodError due to an undefined method called 'text' for the Comment with the following attributes: id: nil, author: nil, created_at: nil, updated_at: nil

I'm currently integrating rails with react to include a comments section in the app I am developing. While the /comments page is functional, I encountered an error when attempting to create a new comment. Despite consulting the guide I am following, t ...

htmlruby-on-railsruby-on-rails-4reactjserb

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

htmlcss

Accessing CSV data stored externally using JavaScript

Hi there, I am struggling to load external CSV data into a script due to what I believe is the browser's same origin policy restriction. I came across some information about using cross-document messaging as a workaround, but I have no idea how to go ...

javascripthtmld3.js

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

cssangularangular-materialmat-tab

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

javascriptjqueryhtmlajaxxml

Utilizing the enter key function for form submissions on lists in AngularJS

In my AngularJS project, I am working on an account details page where users can update their personal information. The interface allows for multiple phone numbers and email addresses to be added. Currently, the functionality works well with mouse input or ...

htmlformsangularjsform-submit

AngularJS scope watch isn't firing as expected

In the scope, I store a filtering string for dates. $scope.myModel = {date:""}; Utilizing a jQuery datepicker, <input date-value="myModel.date" date-picker /> This directive updates the string through AngularJS - Attribute directive input value c ...

javascriptjqueryhtmlangularjs

combining HTML and CSS for perfect alignment

I'm having trouble trying to align an image and some text side by side. Below is the code that includes an image and text (Name and Age), but they are not aligning properly even after using float: left. Can anyone help me with this? Thank you. < ...

htmlcss

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

javascripthtmlarraysangulardatatable

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming