Feeling lost and frustrated trying to align a div with a menu in the center

I've been struggling for over an hour now to center a menu on my website.

Despite trying all of Google's recommendations, I still can't seem to get it right.

Could someone please point out what obvious mistake I might be making?

Below is the HTML code:

<header>
<div class="wrap-header zerogrid">
    <div id="logo"><a href="#"><img src="./images/logonew.png"/></a></div>
    <nav>
        <div class="wrap-nav">
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="food.html">Our Food</a></li>
                    <li><a href="drinks.html">Our Bar</a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </div>

            <div class="minimenu"><div>MENU</div>
                <select onchange="location=this.value">
                    <option></option>
                    <option value="index.html">Home</option>
                    <option value="food.html">Our Food</option>
                    <option value="single.html">Our Bar</option>
                    <option value="gallery.html">Gallery</option>
                    <option value="contact.html">Contact Us</option>
                </select>
            </div>
        </div>
    </nav>
</div>

And here is the corresponding CSS code:

header {background:#e7dcd5; border-bottom: 0px solid #e7dcd5; background:url(../images/speckledbg.jpg) repeat scroll 0 0; text-align: center;}
header .wrap-header{height: 150px; text-align: center;}
header #logo {position:absolute; top: 15px;  padding:5px; width: 100%; margin: 0 auto;}

nav {width:100%;text-align:center; height:37px; display:block; margin-left:auto;margin-right:auto;}
nav .wrap-nav{position:absolute; top:115px; height: 37px; background:#e7dcd5; text-align:center;}

.menu ul {list-style: none;margin: 0;padding: 0; text-align:center; }
.menu  ul li {position: relative;float: left;padding: 6px 5px 0px 5px;}
.menu  ul li:hover {background:#b9aaa0;}
.menu  ul li a {font-size: 18px; line-height:14px;color: #3e3223;display: block;padding: 6px 10px;margin-bottom: 5px;z-index: 6;position: relative;}
.menu  ul li:hover a {color:#ffffff;}

.minimenu{display:none;}
.minimenu{position: relative;margin: 0px;background:#333333;}
.minimenu div{overflow: hidden;position: relative;font: 18px/37px 'PT Sans Narrow' !important;color: #fff;text-align:center;text-transform:uppercase;font-weight:bold;}
.minimenu select{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%; opacity: 0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: pointer;}

Here's the JSFiddle link for reference.

Appreciate any help in advance!

htmlcss

Answer №1

To achieve the desired layout, make sure to set the width of the container with the class .wrap-nav and apply display:inline-block to the menu items. This will result in proper alignment.

You can view a live example by visiting: http://jsfiddle.net/hR7qZ/3/

Answer №2

Consider updating your design with the following changes:

nav .wrap-nav{
  Adjust the style as necessary:
  Set position to relative
  Width should be 500px
  Top should be 115px
  Height should be 37px
  Background color should be #e7dcd5
  Text alignment should be center
  Margin should be set to auto
}

Answer №3

Cascading Style Sheets:

header .nav-container{
      position:relative;
      width:480px; 
      top:110px; 
      height: 35px; 
      background:#f1ebe6;    
      text-align:center;
      margin: 0 auto;
}
.links ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: center;
     display: inline-block;
}

Answer №4

After making some changes, I eliminated the position:absolute attribute from the nav .wrap-nav class and inserted the width:20% attribute in the .menu ul li class.

To see the updated version, visit the following jsfiddle link: Link

Answer №5

Adjust the css to look like this:

nav .wrap-nav{
     /*position:absolute;*/
     top:115px;
     height: 37px;
     background:#e7dcd5;
     text-align:center;
     /*Include these lines*/
     margin: 0 auto; /*center the container if have a width*/
     width: 500px; /8set value width you want*/
}

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 custom directive containing ng-switch isn't being reevaluated when the value is updated

I have developed a unique directive that acts as a reusable form. The form includes an error message display section which utilizes ng-switch: <div ng-switch="status"> <span ng-switch-when="Error" class="text-error">An Error occurred</spa ...

javascripthtmlangularjsangularjs-directiveng-switch

Switch between using the useState hook by toggling it with the MUI Switch

Looking to implement a custom Dark Mode feature for a specific element on my create-react-app website using MUI. I have successfully implemented the Switch to change the state on toggle, but I am having trouble figuring out how to toggle it back and fort ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to integrate both login and signup functionality into a single page in a Django application?

Is it possible to have both the login and sign up forms on the same page, enabling users to signup and login depending on which button was clicked? Here is an image of my registration page: enter image description here enter image description here Additio ...

pythonhtmldjangodjango-views

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

htmlcsswordpresscontact-form-7elementor

Issue with Angular controller failing to load when link is clicked

I am currently developing a webpage that incorporates Angular and responds to ajax requests by populating data into a table. When I manually enter the address, everything works as expected. However, if I navigate to the page using a link ( <a href="/pro ...

javascriptjqueryhtmlangularjsajax

I've been stuck on this for the past hour, trying to figure out why /js/bootstrap.min.js can't be located

I'm having an issue with the code in base.html while trying to create a bootstrap starter template. I copied it from bootstrap but when I run it, I get an error related to /js/bootstrap.min.js. Can someone help me figure out what's wrong? Thank y ...

javascripthtmljquerydjangobootstrap-4

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

javascriptjqueryjsonhtml

Is there a quicker alternative to html.fromhtml for adding html-styled text to textviews?

Looking for a quicker solution than using Html.fromHtml to set text in multiple TextViews. Open to suggestions of support libraries that may offer a faster method. Spannables have been considered, but they don't allow for line breaks without using Spa ...

androidhtmltextview

How to remove previous and next buttons in product carousel using Bootstrap 3.3.5

Currently, I am tackling a small project and venturing into the world of bootstrap for the first time. I have hit a roadblock when it comes to disabling (not hiding) product carousel controls when the active state is on the item:first & item:last classes. ...

jquerycsstwitter-bootstrapcarousel

Integrating data binding within a .append function using AngularJS

I followed this code example (http://jsfiddle.net/ftfish/KyEr3/) to develop a form. However, I encountered an issue with an input having ng-model set to "value" and needing to display that value within {{ }} in a TD: angular.element(document.getElementByI ...

javascripthtmlangularjs

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?

Recently, a question was raised on this platform regarding the use of Selenium to access the shadow DOM. Curious about this topic, I delved into the MDN article Using shadow DOM and decided to replicate the code on my local machine. Surprisingly, it worked ...

javascripthtmlcssweb-componentshadow-dom

Express not receiving data from HTML form submission

Check out my HTML form below: <form method="post" id="registration-form" action="/register"> <div class="form-group"> <label for="UsernameRegistration">Username:</label> <input type="text" class="form- ...

htmlnode.jsexpress

What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...

cssasp.netbootstrap-5bootstrap-table

Display a notification to the user prior to reloading the page

I have created a code for logging attendance at work using a barcode reader. The user simply needs to scan their card with a barcode to register their attendance. let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focu ...

javascripthtmljson

Modifying an HTML attribute dynamically in D3 by evaluating its existing value

I'm facing a seemingly simple task, but I can't quite crack it. My web page showcases multiple bar graphs, and I'm aiming to create a button that reveals or conceals certain bars. Specifically, when toggled, I want half of the bars to vanish ...

javascripthtmld3.js

Utilizing CSS3 transformations for a symbol

I'm currently attempting to implement a CSS transformation on an icon (glyph) within a :before pseudo element. My primary objective is to execute a simple "flip" animation on the icon using transform: scale(-1, 1), but I am encountering difficulties ...

htmlcss

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

javascriptjquerycssasp.nethtml

Sending Email Form Producing Blank Page

My website's homepage is currently on a testing server. When I submit the form, the page appears blank, but it is still successfully sending the email. Another issue I am facing is that the checkbox values are not being displayed in the email. It see ...

phphtmlforms

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

javascripthtmlangularjsinternet-explorer

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

htmlcssimagenav