Centering Menu position and Lowercase the SubMenu

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

  • Avatar: royaltheme-user
    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

    10 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    April 30, 2015 at 07:26

    Hello,

    Please provide us with link to the page.

    Regards,
    Robert Hall.

    Avatar: royaltheme-user
    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.

    theme menu

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

    Thanks in advance

    Avatar: royaltheme-user
    royaltheme-user
    Participant
    April 30, 2015 at 09:16

    This is the heder I am using

    http://imgur.com/zxGf56F

    Avatar: Eva
    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.

    Avatar: royaltheme-user
    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

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 30, 2015 at 10:07

    Hello

    Please provide us with the link to your site.

    With best regards
    Brian Johnson

    Avatar: royaltheme-user
    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.
    Avatar: Robert Hall
    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.

    Avatar: royaltheme-user
    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

    Avatar: Brian Johnson
    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

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.