Having trouble aligning text in the menu of my WordPress theme

Is there a way to perfectly center it?

This is the current state of my CSS:

/* First Level - Menu Secondary */
.menu-secondary li a {
    color: #FFFFFF;
    padding: 14px 3px 13px 15px;
    text-decoration: none;
    font-family: 'Gentium+Basic', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
}

.menu-secondary li a:hover, .menu-secondary li a:active, 
.menu-secondary li a:focus, .menu-secondary li:hover > a, 
.menu-secondary li.current-cat > a, .menu-secondary li.current_page_item > a, 
.menu-secondary li.current-menu-item > a {
    color: #000000;
    background:#FFFFFF;
    outline: 0;
}

/* Child Levels - Menu Secondary */

.menu-secondary li li a {
    color: #FFFFFF;
    background: #000000;
    padding: 10px 15px;
    text-transform: none;
    margin: 0;
    font-weight: normal;
}

.menu-secondary li li a:hover, .menu-secondary li li a:active, 
.menu-secondary li li a:focus, .menu-secondary li li:hover > a, 
.menu-secondary li li.current-cat > a, .menu-secondary li li.current_page_item > a, 
.menu-secondary li li.current-menu-item > a {
    color: #FFFFFF;
    background: #22AEEF;
    outline: 0;
}

/* Arrows - Menu Secondary */

.menu-secondary a.sf-with-ul {
    padding-right: 26px;
    min-width: 1px;
}
.menu-secondary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 13px 13px 0 0;
}

.menu-secondary li li .sf-sub-indicator {

    padding: 9px 13px 0 0;
}

/* Shadows - Menu Secondary */

.wrap-menu-secondary .sf-shadow ul {
    background: url('images/menu-secondary-shadow.png') no-repeat bottom right;
}

I have tried various codes within .menu-secondary li a but haven't achieved perfect centering for the text and links.

cssmenucenter

Answer №1

Ah, I understand your inquiry now.

To resolve this issue, insert a class clearfix into the element #menu-secondary-menu. Afterwards, include the following CSS:

#menu-secondary-menu {
  display: table;
  margin: 0 auto;
}

This should successfully accomplish what you're looking for.

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 height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

Tips for making a reusable function that utilizes alternating if statements

After hours of experimenting, I finally achieved a smooth scrolling effect with a bounce at the top and bottom. Now, my challenge lies in creating reusable and clean code for this implementation. Perhaps implementing an algorithm could solve this issue? T ...

javascriptcssalgorithmmath

Troubleshooting: CSS Pseudo :after doesn't apply to an anchor tag

I've created a pseudo CSS style for an anchor tag, which was working fine before. However, for some reason, it's no longer working. I tried using Chrome inspect element to add the CSS but it's not being read by the anchor tag. @font-face ...

htmlcsspseudo-element

How can I position a div to always display directly above another div?

I am currently working on centering a div and would like to utilize this jQuery function... jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", (($(window).height() - this.outerHeight()) / 2) + ...

javascriptjqueryhtmlcss

Oops! Slim-loading-bar encountered an error because it was unable to locate the module '@angular/core'

I am currently learning Angular and attempting to integrate the ng2-slim-loading-bar. However, I encountered the following error - ERROR in ../node_modules/ng2-slim-loading-bar/index.d.ts(1,37): error TS2307: Cannot find module '@angular/core'. ...

cssangulartypescript

Creating a barcode in HTML using the Code128 (Type B) format, incorporating Google Fonts for customization

I've been tasked with creating an HTML barcode (not an image, not a drawing, and without using TCPDF classes) using PHP in my job, but I'm struggling to understand how it works. I found a sample online and tried to run it, but no barcode is showi ...

phphtmlcssfontsbarcode

Do Scss mixins have the ability to adapt to different screen sizes

In my CSS, I set different font sizes for different devices: For example: @media only screen and (min-width: 480px) and (max-width: 599px) { t-heading { font-size:14px; } } @media only screen and (min-width: 600px) { t-heading { font-size:24px; } } I ...

cssresponsive-designsass

Is it possible to enable the position:sticky property to function within an iframe by synchronizing it with the scrolling of the parent document

One challenge I'm facing is ensuring that the <footer> within an <iframe> remains sticky at the bottom, even when the <iframe> doesn't have a scrollbar. This should be based on the scroll behavior of the parent document. Import ...

javascriptcssiframecss-animationscss-position

Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 ...

htmlcsshtml-table

Adjusting the gap between TableRows in Material-UI

Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...

javascriptcssreactjsmaterial-uijsx

Error Message: "Django Unable to Locate Global Static Files"

I am currently working on setting up a global CSS file for my project, and although it seems to be correctly referenced in the location, the file itself cannot be found. The relevant part of my settings.py file looks like this: BASE_DIR = os.path.dirname ...

htmlcssdjangodjango-staticfilesstatic-files

Tips for importing HTML modules using AJAX technology?

Is it possible to load the correct module on my site depending on the path that the user enters? Would storing the HTML in a file named some_file.htm, ajaxing that file to the client, and then appending it to the DOM work for this purpose? I'm curio ...

javascripthtmlcss

Struggling to properly center the footer on my Django template

I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination. Base HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict ...

htmlcssdjangosticky-footer

Creating a vertical menu from a horizontal navbar can be achieved by adjusting the CSS properties of the glyphs

I am looking to display the symbols like in scenario A for desktop screens and as in scenario B for mobile devices when the menu is expanded. (The code is identical in both scenarios, with the exception of the CSS). Scenario A: http://jsfiddle.net/bs773m8 ...

csstwitter-bootstrap-3

Bug in Cascading Style Sheets affecting Internet Explorer version 6 and version 7

My team is currently facing an issue with our website over at www.eat.vn. While the site functions perfectly on browsers like Firefox, Chrome, IE8 & IE9, and Safari, we are encountering a problem with a key design element when it comes to IE6 and IE7. ...

cssinternet-explorerinternet-explorer-7internet-explorer-6

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

Tips for implementing active pagination state that persists even after refreshing the page

Currently using the Admin LTE theme and encountering an issue with its datatable. I would like the pagination tab to remain active even after a page refresh. Can anyone provide assistance with this? Here is the link to the pagination table: The image att ...

htmlcssbootstrap-4

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to ensure certain items are displayed on different lines?

Currently, I am working on styling an HTML list with the following properties: font-weight: bold; padding: 0px; margin: 0px; list-style-type: none; display: block; width:700px; font-size: 14px; white-space: pre-wrap; The individual cells within this list ...

htmlcsshtml-lists

Guide to using normalize.css via npm installation with webpack

Currently, I am utilizing webpack in conjunction with ReactJS and am exploring the implementation of normalize.css after installing it via npm (). Does the normalize.css take effect immediately upon npm installation? If I were to make modifications to it, ...

javascripthtmlcssnpmwebpack