How to Align a Navbar in the Center with a Fixed Width

I am currently working on aligning the navbar in the center while also maintaining a fixed width for larger screens. My goal is to have the blue area centered over the grid, but I am struggling to get it off the left edge. Additionally, I need the left and right sides to float left and right respectively.

View Example Photo

HTML Code

<div class="navbar">
<div class="navbar-left">
    <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
</div>
<div class="navbar-right">
    <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
    <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
</div>
</div>

CSS Code

.navbar {
background-color: #f8f8f8;
position: fixed;
width: 100%;
max-width: 1140px;
z-index: 1;
font-size: 14px;
min-height: 64px;
list-style: none;
text-align: center;
float: none;
}

.navbar-brand {
float: left;
}

.navbar-arrow {
float: right;
}
htmlcsscss-floatcenternavbar

Answer №1

To achieve the desired layout, you can consider replacing position:fixed with margin:0 Auto; as demonstrated in the example below

<html>
    <head>
        <style>
.navbar {
    background-color: #f8f8f8;
    width: 100%;
    max-width: 1140px;
    z-index: 1;
    font-size: 14px;
    margin:0 Auto;
    min-height: 64px;
    list-style: none;
    text-align: center;
    float: none;
}

.navbar-brand {
    float: left;
}

.navbar-arrow {
    float: right;
}
        </style>
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-left">
                <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
            </div>
            <div class="navbar-right">
                <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
                <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
            </div>
        </div>
    </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

"Utilizing Twitter Bootstrap to create full-width input fields with pre

Presently utilizing bootstrap-2.1.1 In my row-fluid, I have 2 columns with input-prepends inside. Below is a snippet of code: <div class="row-fluid"> <div class="span6"> <ul> <li> <div class="input ...

csstwitter-bootstrap

Leveraging Affix in Bootstrap version 2.3.2

Hey there, I'm currently working on building a sidebar similar to the one you can find here. The issue I'm facing is that my sidebar overlaps with the footer at the bottom of the page. What I need is for the sidebar to move up when the user scrol ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

How to achieve a text border effect using inner glow technique

Can someone help me recreate this unique text design? The font used is Gill Sans MT and the text color is a shade of purple although it may be hard to discern. https://i.sstatic.net/HGrB8.png I have been struggling to achieve the vibrant thick border and ...

css

IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't. Here's the code for my div block: btndownlo ...

htmlcss

Utilizing CURL and PHP to extract and display images from a link onto a website

Can someone help me include the image found at this link in my HTML file under the header? I tried using curl to grab it, but all it shows is text. <html> <h1>SUMMONER ICON</h1> <?php ch = curl_init(); curl_setopt ($ch, CURLOPT_ ...

phphtmlimagecurl

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

cssnode.jsdojothemescustomization

Having trouble getting vertical-align and background-position CSS properties to work when using JavaScript

I'm currently facing an issue with vertically cropping an image within a div. I've been struggling to make the vertical-align and background-position styles work as intended... Despite trying various options like vertical-align, background-posit ...

javascriptcss

What are some strategies for ensuring that this page is responsive across all screen resolutions?

Hey there, I'm a newcomer and experiencing an issue. The page is not responsive for 1366 and 1280 resolutions on PC, although it looks perfect on 1920 and mobile devices. Can anyone provide me with some guidance? I attempted to add `contain` on `obje ...

htmlcssimagetwitter-bootstrapwidth

"Limitation observed - function operates only on first attempt

I have been working on a map project that involves pulling information from Google about various locations using the library available at https://github.com/peledies/google-places In order to troubleshoot and identify the issue with the code related to ma ...

javascriptjqueryhtmlfunctiongoogle-maps-api-3

How can I use jQuery to switch classes or activate a click event on the most recently clicked element?

Within my <ul></ul>, there are 4 <li> elements. <ul class="wcarchive-terms-list"> <li class="wcarchive-term wcarchive-term-parent woof_term_224"> <label class="wcarchive-term-label"> <span cla ...

javascriptphpjqueryhtmlwordpress

Struggling to maintain the footer at the bottom of the page

I've been working hard to implement the tips from a tutorial on keeping the footer at the bottom of the page, especially when there isn't much content. The link to the tutorial can be found here: Despite following all the guidelines and properti ...

htmlcssfooter

Inject Custom ASP Control Script into the DOM dynamically upon registration

During a postback, I am loading my ascx control when a dropdown change event occurs. Parent C#: private void ddlChange() { MyControl myCtr = (CallScript)Page.LoadControl("~/Controls/MyControl.ascx"); myCtr.property = "something"; // setting publ ...

javascriptc#htmlasp.net

Kayak flight search presents a challenge for retrieving the div tag by class name using BeautifulSoup and Chrome driver

I am struggling to correctly identify the valid search results using a classname and then scrape prices from them. Despite my efforts, the code still fails to recognize the class. I initially believed that Selenium could locate the tag post-rendering, but ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Sticky positioning causes elements to stick to the window as the

https://i.stack.imgur.com/nv3vU.png I am facing an issue with a position sticky block that can vary in height relative to the window size. Sometimes, the block is taller than the viewport, making it impossible to scroll to see all the content. Is there a ...

javascripthtmlcsscss-position

The values within the select list are being sent as null

A JSP file was created with an HTML form, which upon submission redirects to a servlet. The form contains a multiple select list with pre-populated values. Within the servlet, there is an attempt to retrieve these values for modification. However, upon ...

javahtmljspservlets

Creating a responsive layout with Bootstrap using fluid rows and columns of varying heights

Using dynamic creation, I am tasked with generating a set of boxes each with slightly varying heights and ensuring that 2, 3, or 4 of them (based on screen size) appear on the same row. Here is an example of my attempt using Bootstrap: <div class="cont ...

htmlcsstwitter-bootstrap

Can MUI 5 replicate the Emotions 'css' function through analog?

From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...

cssmaterial-uiemotioncss-in-js

Is there any effort being made to utilize jQuery for the css @media screen and (max-width: 768px) function?

Is there a solution for handling the @media screen and (max-width: 768px) in CSS? I have created a responsive navigation bar, but when I change the display property of an element from none to block on mobile screens, it also appears on larger screens. Is ...

javascriptjquerycss

Animation triggered when removing items from a filtered list using ng-repeat

I have a unique challenge where I need to display two different sections of an array in a single list by applying a filter within the ng-repeat. Instead of having two separate lists, I am filtering the array directly within the ng-repeat statement. While ...

javascriptcssangularjsanimationangularjs-ng-repeat

Alter the focus and hover color of Material-UI's outlined Chip component

Having trouble applying styles to a Material-UI chip with an outlined variant when hovering, but the expected results are not showing. The border color changes to white as intended, but for some reason, the background color remains unchanged. I'm st ...

cssreactjsmaterial-ui