Center the navigation bar within a division

Kindly take a look at the following link: 

http://83.212.101.132/betdk/home/two

  • As the user scrolls, the navbar moves to the top thanks to the affix plugin.

  • However, it occupies the entire row with "Home" aligned to the left.

What steps should I take to:

  • Maintain the full-width blue background
  • Keep the contents centered

Here is the CSS related to affix:

.affix {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 10;
    box-shadow: 0 0 30px black;
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
    border-radius: 0 !important; 
}

.affix .subcon {
    /* The wrapper around the navbar contents */
}

Any suggestions?

UPDATE

Unykvis' solution does indeed work.

Just add the following (to prevent any issues with the original navbar contents)

.navbar .container {
    padding-left: 0px;
    padding-right: 47px;
}
        .navbar.affix .container {
padding-left:15px;
padding-right:15px;
        }
htmlcsstwitter-bootstrap-3alignment

Answer №1

Wrap the Menu with a .container div:

<div class="navbar-collapse collapse" id="navbar-main" style="padding-left:0; ">
  <div class="container">
     <ul class="nav navbar-nav">

Is this what you're looking for?

To make the alignment correct, do the following:

UPDATE

To adjust the alignment, use the following code:

<div id="nav-fixed" class="container">

Then, change from "container-fluid" to "container" using jQuery. When it's normal, it should be fluid, and when it's fixed, it should be a container.

Answer №2

Here are some CSS properties that can be used to center a fixed element:

width:1000px;
margin-left:-500px;
left:50%;

Check out this example

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

Images and videos are not appearing on GithubPages when viewed online, but they are visible

Check out my GitHub repository: https://github.com/Snipervuk/ChristianMilicevic I'm encountering an issue where my HTML images or videos are not displaying on my GitHub pages online, but they do display locally. I've attempted several solutions ...

html

Is there a way to see the HTML version of an invoice instead of the PDF?

Looking to personalize the .pdf invoice for my PrestaShop store, The issue is that the process is quite time-consuming: Modify .tpl file Generate .pdf file Review changes Meanwhile, I'd like to convert the invoice to HTML to inspect the elements u ...

htmlpdfprestashopprestashop-1.6invoice

The button should only be visible when the input is selected, but it should vanish when a different button within the form is

Having an issue with displaying a button when an input field is in focus. The "Cancel" button should appear when a user interacts with a search bar. I initially used addEventListener for input click/focus to achieve this, but ran into a problem: on mobile ...

javascripthtmlbuttoninputaddeventlistener

Is Javascript the best choice for managing multiple instances of similar HTML code?

I am currently facing the challenge of dealing with a lengthy HTML page consisting of around 300 lines of code. The majority of the code involves repetitive forms, each identical except for the ID (which varies by number). Is it considered appropriate or ...

javascripthtml

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

csstailwind-css

Experiencing difficulties with toggling the visibility of div elements when an onchange event occurs

I am experiencing some difficulties triggering an on-change event in the department drop-down field and I'm not certain if I've written it correctly. The error message indicates: Uncaught TypeError: Cannot read property 'style' of null. ...

phphtmlcodeigniter

The checkbox is not updating as anticipated

I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...

javascriptjqueryhtml

Sophisticated spreadsheet - Pinpointing particular <TR>

With my current setup, I have a complicated table that results in a simple layout. Unfortunately, changing the HTML output is not an option for me right now. So, I am experimenting with jQuery: <div id="contentDiv" class="mainContent"> <table c ...

jquerycss

Printing pages with Bootstrap without disrupting cards

My goal is to print a basic bootstrap page using window.print(). Here is what the page looks like (with multiple div.col-md-12 & cards) : <div class="overview"> <!-- Takes up entire screen width --> <div class="row"> <div ...

htmlcssprintingbootstrap-4

Using Javascript to Change the Radio Station Station

I am a beginner in the world of programming and I am attempting to make this feature work. My goal is to give the user the ability to select the radio station they want to listen to. Here is what I have come up with, but unfortunately it is not functioni ...

javascripthtml

Updating Text in Textarea upon Selection Change

Need assistance with updating the content of a textarea based on a select option change. Below is an example of my code: <tr><td>Template:</td><td> <select t name="template" onChange = "setTemplate();"> <option ...

javascripthtmltextareaselection

Show popup window during servlet processing

I'm attempting to display a modal box in a Java servlet with the message "Please wait while your request is processed". I understand that I can make an AJAX call and manage the modal in the front-end code. Currently, I trigger the servlet when the us ...

javascriptjavahtmlservlets

What causes a new stacking context to be formed when using position: relative without z-index?

After reading this informative piece: When two elements share the same stack level, their layering is determined by their order in the source code. Elements stacked successively are placed on top of those that came before them. And referencing this ar ...

css

Ensure that the width does not decrease

Edited: included fiddle and code snippets I am facing an issue with the width of columns in my layout. The width of the columns is dynamically calculated based on the content they hold. However, when I filter the results using a search input for a specifi ...

htmlcssvue.js

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

Update Note: Primarily targeting Chrome (and maybe Firefox) for an extension. However, open to suggestions for a universal solution. Additional Information Note: Discovered that lack of spaces in text for A causing overflow issues with B. Situation seem ...

htmlcss

jQuery replacing spaces in id names

I'm encountering an issue with the following HTML and jQuery code. The problem seems to be related to the space in the ID name. HTML <span id="plus one">Plus One</span> jQuery $("#plus one").hide(); Since I'm unable to change the ...

jqueryhtml

Tips for using multiple ng-models in a single input field

Can multiple ng-models be used on a single input field? For example: <input ng-model="formData.glCode" ng-model="accNumber" ng-change="accNumber = editAccountNumber(accNumber)"/> I need to apply this to inputs that already have ng-model set, and I ...

angularjshtmlcheckbox

Tips for resolving the issue of receiving a warning about passing "onClick" to a "<Link>" component with an `href` of `#` while having "legacyBehavior" enabled in Next.js

My current project is displaying a lot of warnings in the browser console and I'm unsure about the reasons behind it. The warnings include: "onClick" was passed to with href of /discovery/edit but "legacyBehavior" was set. The l ...

javascripthtmlreactjsnext.js

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables