[theBaller]

theBaller

#51889

Greetings!

I would like to know how to center align or add padding to the text for menu options on the main menu hamburger dropdown (the hamburger menu icon appears when the site is accessed on a mobile device or when a window is narrowed to a certain point on a desktop or laptop).

Currently, when a user clicks on the hamburger dropdown menu icon, the text for menu items is to the far left of the screen display (no padding at all). If “Full width” is selected for Columns Layout (Graphene: Display > Columns Layout > Full width), the dropdown text doesn’t display completely (the text is too far left and letters get cut off).

I notice that on this Graphene forum site, the menu items “Home,” “Register,” and “Contact Us” are appropriately padded when displayed as a dropdown menu. I would like my menu items to have a similar amount of padding or else be center aligned.

A solution to this display issue would be greatly appreciated.

[biwek86619]

biwek86619

#51905

You can use the following CSS code to center align or add padding to the text for menu options on the main menu hamburger dropdown:

.main-menu .hamburger-menu ul li a {
/* Center align the text */
text-align: center;

/* Add padding to the left and right of the text */
padding: 0 10px;
}

If you want to add padding to the top and bottom of the text as well, you can use the following code:

.main-menu .hamburger-menu ul li a {
/* Center align the text */
text-align: center;

/* Add padding to the left, right, top, and bottom of the text */
padding: 10px;
}

Once you have added this code to your theme’s style.css file, you will need to save the file and then clear your cache. After that, the text for menu options on the main menu hamburger dropdown should be centered aligned or have padding, depending on the code you used.