Trouble achieving center alignment of navigation bar using @media query in Firefox and IE

Looking for help with creating a video hub that includes a navigation bar? Instead of using an accordion nav collapse, I prefer the menu to carry onto the next line and be centered. Here is the code snippet I used to achieve this effect:

@media screen and (max-width: 850px){
  .navbar ul li {
    float: center;
    display: inline-block;
  }
  .last {
    background: none !important; 
  }

} 

While this code snippet works flawlessly in Chrome, it seems to have some issues in Firefox and IE where the navbar doesn't center properly. Although the media query change for the .last class works, the problem lies in how Firefox and IE render the navbar.

If anyone has any suggestions on how to resolve this issue, please share your insights. If more code is needed for reference, you can visit the site .

Answer №1

According to sdleihssirhc's recommendation, applying text-align:center; to the ul element should align it properly. If the issue persists, it might be due to the ul width exceeding the content area. In this case, consider adding width:auto; to the ul element. Alternatively, you can center both the ul and navbar div by using margin:0 auto;.

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

An issue in D3.js where the chart bars are not properly synced with the x-axis labels

Currently delving into the world of d3.js for the first time. In our project, we needed to adjust the width of each bar from .attr('width', xScale.rangeBand()) line 46 to .attr('width', '10') line 50 After making this cha ...

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Here is the HTML code I am using to input prompts into a chatbot: <div class="input-group mb-3"> <input type="text" class="form-control" id="chat-input"> <div class="input-group-append ...

What is the best way to include a hyperlink in the same line?

I was curious about how to insert a hyperlink following some text: If you need more information on PCSE, make sure to check out the FAQ section on the PCSE website. (INSERT LINK HERE) <div class="panel-body"> <p>If you require any further inf ...

Struggling to eliminate HTML entities in PHP

Hey everyone, I've been attempting to sanitize a string with HTML entities using PHP, but I'm running into some issues. Below is a snippet of my code: $body = "Mal ein neuer &amp;lt;b&amp;gt;Test&amp;lt;/b&amp;gt;&amp;lt;br& ...

Generate code in Yii2 using the active form

This is the code I am using in Yii2: <?= $form->field($model, 'username')->label(false); ?> <?= $form->field($model, 'password')->label(false); ?> It produces the following output: <div class="form-group fi ...

extract information from the HTML id attribute and assign it to a PHP variable using the GET method

After reviewing numerous examples, I am still unable to retrieve the value from the ID attribute in my input element. This identifier is crucial for deleting records from the database, but my attempts with Get method have been unsuccessful. <?php ...

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days ...

What was the inspiration behind Spotify's section design?

Spotify has cleverly hidden the overflowing content without showing a scrollbar, allowing users to swipe through the list. How did they achieve this? I am currently using tailwindcss if that makes a difference. https://i.stack.imgur.com/z59yv.png ...

Is it possible to use basic HTML for creating views within the Express framework?

I recently began using node.js in conjunction with the Express framework, but I'm finding it challenging to remove Jade and other templates from my project. I prefer writing my views in plain HTML. Can anyone provide guidance on how to achieve this? ...

Right-align SELECT-OPTIONS text

Here are the screenshots of the form I'm currently working on. I am aiming to create a select box in the form where the text within the options is aligned to the right. After an option is selected, the chosen text should be displayed as illustrated i ...

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

Looking for assistance with hiding the dropdown icon in the <Select> component of material-ui framework

Currently, I am utilizing the Select component from material-ui. According to the documentation of material-ui, it is possible to customize the CSS of components by using the tag sx={{ ... }}. My goal is to style the component with a className of '.Mu ...

Adjusting the size of h1 when hovering over an image

Can anyone help me figure out how to increase the width of my h1 tag when hovering over the image? I've been struggling to make it work. http://jsfiddle.net/xJ4dc/ Thank you in advance for any assistance. ...

Merge different $_GET parameters together before submitting

Not too certain if it's achievable, but here's the issue I'm struggling with. I need a form that generates this specific link. The desired end link is: I am unable to utilize a form for this task, but I can work with input fields. Any sug ...

Troubles with caching on Amazon S3

Just starting out in web development and I'm working on updating HTML and CSS files stored on Amazon S3. Our website's backend is hosted on Heroku, while the front-end is on Amazon S3. Whenever I make changes to a CSS file, I can immediately see ...

Is there a method to categorize distinct "continuing" numbered list items in order to show that they are interconnected?

There is HTML code that I am currently dealing with, and it looks like this: <ol> <li>...</li> </ol> ... content <ol start="2"> <li>...</li> </ol> ... more content <ol start="3"> <li&g ...

Change the background color of all cells in a Bootstrap table by hovering over a single cell

Here is the code for a bootstrap table: <body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0"> <div class="container-fluid h-100"> <div class="row float-right align-items-center" style="height: 5%;"> ...

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

Design a customizable input field to collect HTML/JS tags

I'm looking to incorporate a similar design element on my website. Can anyone offer me some guidance? Check out the image here ...

Why does selecting by data- attribute in jQuery fail for certain elements?

Consider this sample HTML code: <div id="details" data-type="motion"> <p>Lorem ipsum</p> </div> <img src="http://placehold.it/50x50" data-type="motion" /> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr ...