Centering menu items in Navigation zone

Topics: General
Aug 27, 2013 at 1:35 PM
Edited Aug 27, 2013 at 4:00 PM
Greatings everyone,

I'll start with the information that I'm new to Orchard. For a couple of days now I'm trying to center the bars I have on my menu but no matter what and where I change they're still positioned from the left side.

I would be very thankfull for help.
Coordinator
Aug 27, 2013 at 9:41 PM
Hi, and welcome. That sounds like entirely a CSS problem. Any CSS solution you find on Google should be easily added to your theme's stylesheet.
Aug 27, 2013 at 10:55 PM
That's the problem, I've checked so many ways and none of them worked
Coordinator
Aug 27, 2013 at 11:45 PM
What did you try and how did it not work?
Aug 28, 2013 at 6:15 AM
First I tried to center the menu buttons in the layout.cshtml. That didn't work. I then realised that it had to be somewhere in the css file. I tried to modify in the navigation part things like:
  • text-align: center
  • margin-left: auto; and margin-right: auto;
  • margin-left: auto; and margin-right: auto;
  • and a few more ways I can't even remember
    The result was: the buttons in my menu zone didn't move even a pixel.
Coordinator
Aug 28, 2013 at 7:41 AM
What selector did you use?
Aug 28, 2013 at 8:12 AM
To make it simpler, I paste here everything from my css file thats about the navigation part:
#layout-navigation 
{
    width: 960px;
    margin: auto;
    display: block;
    /*border-bottom: 1px solid #dbdbdb;*/
}

nav ul 
{
    padding: 0px;
    margin: 0px;
}

    nav ul li
    {
        /*border:1px solid #dbdbdb;*/
        background-image:url('textfeld1.png');
        display:block;
        margin:0 2px -1px 0;
    }
    nav > ul li.current 
    {
        /*border-bottom: 1px solid #fff;*/
        /*background:#2E2EFE;*/

    }
    nav ul li a 
    {
        padding:10px 18px;
        display:block;
        color: #FFFFFF;
        font-size: 1.5em;
        text-decoration:none;
        line-height:24px;
    }


/* first level */
nav > ul > li { float:left; }
nav > ul > li > a { float:left; }
nav > ul > li:hover > ul { display:block; }
nav > ul > li:hover { }

/* second level */
nav > ul > li > ul { margin: 24px 0px 0px -1px; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb;}
nav > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li:hover > a { }

nav > ul > li > ul > li:hover > ul { display:block; }

/* third level */
nav > ul > li > ul > li > ul { margin: -20px -1px 0px 90% ; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb; }
nav > ul > li > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li > ul > li:hover > a { }

/* deeper levels */
nav > ul > li > ul > li > ul ul { display:none; }

.zone-navigation { padding: 0; }
I hope that's everything
Coordinator
Aug 28, 2013 at 6:45 PM
Thanks, but that's not telling me under what selector you made the changes.
Aug 28, 2013 at 6:49 PM
What do you mean with selector ?? I tried to make changes in the css file only
Coordinator
Aug 28, 2013 at 6:59 PM
Aug 29, 2013 at 8:15 AM
Well, if I understand it correctly whats written in the link above, I also tried to make a selector which had the centering changes and applyed them then to:
  • #layou-navigation
  • nav ul
  • nav ul li
  • nav > ul li.current
  • nav ul li a
Coordinator
Aug 29, 2013 at 8:25 AM
That's weird, because I just tried nav ul li {text-align: center;} and it worked perfectly. What theme are you using? Are you using your browser's dev tools to experiment with styling?
Aug 29, 2013 at 9:08 AM
Edited Aug 29, 2013 at 9:12 AM
I'm using the default theme machine

I also tried what you wrote with text-align: center; and still it won't move a pixel
Coordinator
Aug 29, 2013 at 7:58 PM
Edited Aug 29, 2013 at 7:59 PM
I don't know what to say. I just verified it again, and nav ul li {text-align: center;} worked perfectly, with the Theme Machine. Maybe a caching issue? Try CTRL+F5? What browser are you using? Are you sure you modified the stylesheet in theme machine and not another one?

centered menu

You'll also want to make sure that there is actually space for your menu entries to be centered.
Aug 29, 2013 at 9:28 PM
Edited Aug 29, 2013 at 10:01 PM
Yes I'm sure I'm modifying the css of the theme machine since it's the only one I have. I also tried to ctrl + f5 like you said and still nothing. About the browser I don't know what else to say, I was testing it on IE, firefox, chrome and safari and on NONE of them this wasn't working.

I also noticed a problem with highlighting the current page opened in the menu. Same story as with the menu centering: no matter what I do it won't move a pixel ... But that's another story.

EDIT: BertrandLeRoy I think we didn't understand each other :) perhaps it's also my fault due to my not so good english ... Anyway you managed to center the text in the menu buttons ... but how to center the whole buttons in the menu block ??
Aug 29, 2013 at 9:59 PM
Maybe what you need is this:

#layout-navigation nav {
display: table;
margin: 0 auto;
}




Coordinator
Aug 29, 2013 at 11:30 PM
Yep, that's not what I had understood, and yes, @kassobasi's solution works, I just checked.
Aug 30, 2013 at 6:15 AM
Well I don't want do dissapoint you guys but the method from kassobasi doesn't work either in my css
Coordinator
Aug 30, 2013 at 8:00 AM
If it doesn't then you are probably not modifying the right stylesheet. Please give the full path to the stylesheet you're editing.
Aug 30, 2013 at 8:07 AM
The path of the css I'm editing

C:\Users\Maciej\Downloads\Orchard\src\Orchard.Web\Themes\TheThemeMachine\Styles\Site.css
Coordinator
Aug 30, 2013 at 8:09 AM
And when you edit the styles from the browser's dev tools, you also don't see a change? Did you try modifying something more obvious, like a border color, just as a sanity check?
Aug 30, 2013 at 8:13 AM
I modified the background of the menu buttons, the position of the whole menu zone and the color of the text inside the menu bars. No matter what I edit further, nothing works.
Coordinator
Aug 30, 2013 at 8:18 AM
Can you try to modify something on the body tag, as a further sanity check? This is just impossible. I made the change, several times, and it works perfectly. We must be missing something obvious.
Aug 30, 2013 at 8:25 AM
In the body part:

body {

something
something

}

when I try to edit something it works.
Coordinator
Aug 30, 2013 at 8:58 PM
So you tried to add nav {display: table;margin: 0 auto;} to your stylesheet and it had no effect? can you try to add another more obvious style such as background-color:red; and see if that works?
Sep 2, 2013 at 8:09 AM
After the whole weekend of fight I managed to finally solve the problem. The line "text-align: center;" in the "#layout-navigation" worked. I'm just confused because I used this line a couple of times in that layout and it didn't work. Why is it working now ... I have no idea by what miracle ... I also managed to highlight the active opened site on the menu buttons.

Anyway I would like to so a big thank you to everyone for the help :)