Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue.

CSS Code:

<style type="text/css">
/* STYLING FOR DROPDOWN MENU */
#menu li {
    color: #222222;
}
#mega {
list-style:none;
font-weight:bold;
} 

...
 
/* END OF STYLESHEET */

h1 {
    color:#858585;
    font-size:14px;
}
h2{
    color:#333333;
    font-size:24px;
}
p {
    color:#333333;
    font-size:14px;
}
</style>

HTML Code:

        <div class="navtop">
                ...
        </div>

I appreciate any help with this issue! Thank you in advance :)

htmlcssmenudrop-down-menu

Answer №1

update the styling 

body
{ 
text-align: center; /* !!! */
 margin: 0 auto;
padding: 0;
width:100%;
}

and modify this

#mega li {
float:left;
clear:right;
padding-left: 15px;
}

to 

#mega li {
display:inline;
clear:right;
padding-left: 15px;
}

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

Is there a way to retrieve a singular value from various select options sharing the same name within a single form?

I am facing an issue with my code where only the value assigned to the last select option panel is being saved in the database table. I need assistance as it was working well initially but for some reason, it's not functioning correctly now. <?php ...

javascriptphphtml

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens? I attempted to use overflow: scroll, but it only applied scrolling to the internal d ...

javascriptjqueryhtmlcss

Is there a way to view images embedded in local .msg files in a web browser in HTML format?

Does anyone know how to display embedded pictures in local .msg files when opening them in a web browser using HTML format? Currently, when I open the .msg file with embedded pictures, all I see is a blank space indicating "picture not found." Interestin ...

htmlvb.netoutlookmsg

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

htmlcssangular

Iconic slim template for data disabling

Having an issue while working on a Rails app with slim. I am facing a problem passing HTML to slim through a button using the data-disable-with attribute. My aim is to display an icon on the button when it's clicked. = f.submit t("basket.next_step") ...

htmlruby-on-railsslim-lang

Displaying the contents of all files within a directory on a webpage by utilizing AJAX and JQuery

Scenario: Within my server, there exists a directory housing various log files. My objective is to exhibit all these files on a single webpage in a sequential list, with the most recent log positioned at the bottom. These logs are generated externally (ou ...

jqueryhtmlajax

Use CSS alignment to combine both the profile picture and title on a webpage

Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme? My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap un ...

htmlimagecssalignmenttumblr

Implementing Jquery Table Selection with Custom CSS Class

When I attempted to use the selectable feature on a table with a CSS class applied, the selection did not work. However, when I removed the CSS class, the selection worked perfectly fine. I suspect that the issue lies within the CSS definition, but I' ...

jquerycssselectable

Tips for streaming an mp3 file on the internet

Is there a way to play an MP3 on a webpage without allowing users to download it? ...

htmlmp3

How can I customize the color of a date range in the jQuery date picker?

Currently, I am using the following method to set a different color for a specific date range - April 5th to April 7th. You can view it here: http://jsfiddle.net/sickworm/dpvz52tf/ var SelectedDates = {}; SelectedDates[new Date('04/05/2015') ...

jquerycsscalendarbackground-colordatapicker

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

c#cssasp.netasp.net-mvcgenerics

Each container has its own div counter

Help needed to complete this code. The task is to count the number of .resp-containers in each container separately. Then, based on that count, assign a corresponding class to each element within the containers. Check out the code here $(document).ready(f ...

javascriptjqueryhtmlcss

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

phpcsssymfony

Use jQuery to add and remove classes while opening and closing div elements individually

I am working on a page that contains hidden fullscreen divs. My goal is to be able to open these divs individually by clicking on the corresponding button and close them by clicking the "close" button inside the div. Currently, I am able to open a div suc ...

jqueryhtmlcssoverlayaddclass

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

javascriptcssreactjsreact-select

Combine the jQuery selectors :has() and :contains() for effective element targeting!

I am trying to select a list item element that has a label element inside it. My goal is to use the :has() selector to target the list item and then match text within the label using the :contains() selector. Can I achieve this in a single line of jQuery ...

javascriptjqueryhtmlcss

Center text vertically even when its number of lines is unknown

Can anyone help me figure out how to vertically center text that can be one or two lines long? The text also has a specific line-height set. I attempted the solution provided in this link but it didn't produce the desired result: <div> < ...

htmlcss

Control your thumbnails with the powerful iDangerous Swiper feature

Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...

jqueryhtml

Comparison between Login popups and Login pagesIt's time

Curious about the most effective approach for handling multiple login forms? Would you rather: A) Keep each form on a separate web page. B) Utilize modal popups with update panels. Weighing SEO considerations as well. Cheers! ...

c#htmlauthentication

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" t ...

javascriptjqueryhtmlopencart