Return to previous page

Centering Menu position and Lowercase the SubMenu

This topic has 11 replies, 4 voices, and was last updated 9 years, 6 months ago ago by Brian Johnson

royaltheme-user

Participant

April 30, 2015 at 02:52

Hi,

I was trying to center the main navigation menu, added “text-align: center;” in the related section in the css under “float: left;” but nothing happened. I am not expert in the CSS situations but when I make float option set to right instead of left, the menu location changes to center on the header but the menu items listing also changes. Long way short; I just want to locate the main navigation menu sit on the center position of the header.

Other issue I get stuck in is to make the submenu items text transform to lowercase. I changed the main menu items text transform to none via the typography option in royal theme options but none of the options listed there didn’t apply to sub menu items.

Thanks in advance

#60716 Copied

10 Answers

Robert Hall

Support staff

April 30, 2015 at 07:26

Hello,

Please provide us with link to the page.

Regards,
Robert Hall.

#60725 Copied

royaltheme-user

Participant

April 30, 2015 at 09:15

Thanks for the respond.
Solved the lowercase issue. Still struggling in the centering the menu part.
Website is in maintenance mode with the plugin so is not live at the moment.

I think this would help;
I use the below menu option, and what I simply want to do is to center the menu block no matter how many many options there are.

In this, menu starts right after the logo and leans to the left. Just want to center the menu.

Thanks in advance

#60752 Copied

royaltheme-user

Participant

April 30, 2015 at 09:16

This is the heder I am using

http://imgur.com/zxGf56F

#60753 Copied
Eva Kemp

Support staff

April 30, 2015 at 09:28
Hello,

Try to use this code in custom.css file:
```
.navbar-collapse.collapse {
 margin-left: 50px !important;
}
```
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

Thank you.
Regards,
Eva Kemp.
#60756 Copied
royaltheme-user

Participant

April 30, 2015 at 09:40

Thanks for the respond, it kinda does the trick but, if I get it right we are leaning the menu a bit to right side from the menu in px. I checked it in a computer with a lower resolution and the menu doesnt seem centered from that point of view. Also tried it in a higher resolution display and that 50px margin doesnt seem to center it enough. I can arrange it to remain at the center on my computer’s resolution with an apropriate px value but this wont apply to different resolutions I assume. Isn’t there a way to use the “center” value somehow stick it at the center of header no matter how many menu items in the menu or what resolution has the visitor ?

Thanks in advance

#60761 Copied

Brian Johnson

Member

April 30, 2015 at 10:07

Hello

Please provide us with the link to your site.

With best regards
Brian Johnson

#60763 Copied

royaltheme-user

Participant

April 30, 2015 at 10:24

As I mentioned the website is not live, I have created a user for you to view it.

Please, contact administrator
for this information.

#60768 Copied
Robert Hall

Support staff

April 30, 2015 at 10:36
Hello,

Please try to replace code above to this
```
.navbar-collapse.collapse {
  padding: 0 20px;
}
```
Regards,
Robert Hall.
#60774 Copied
royaltheme-user

Participant

April 30, 2015 at 16:43

Hi, thanks for the respond, but it is a px solution aswell, isnt it ? Isn’t there a way to make that menu block centered with a direct code not with a px included ?

Thanks in advance

#60892 Copied
Brian Johnson

Member

April 30, 2015 at 17:20
Hello

You may try following code:
```
.navbar-collapse.collapse {
  position:absolute;
  left:23%;
  top:34%;
```
With best regards
Brian Johnson
#60898 Copied
Tagged: centering menu, persuasive writing, positioning menu, submenu lowercase, templates, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)