navigation menu bar cant be centrally aligned

Question

I am using meganizr mega menu.usually it is available either left-aligned or right-aligned.but for my requirement i tried to make it center-aligned.Here i made an online gist.

On the line No.35 if i remove float:left and give text-align:center to either ul or li, it will be vertical. I tried left:240px; it is in center but its not responsive. I tried solutions on other questions here for a whole day.but could not center-align menu and responsive at same time.can any one help me please?

my answer is better then jack's | jack's answer made menu distroyed — alireza, Sep 11 '13 at 14:04

score 1 · Answer 1 · answered Sep 11 '13 at 13:55

1

Ok, so I added a <div class="wrap"> and gave it the same styles and meganizer then changed the width on meganizer to 50% (you can set it to whatever you want) and added margin:0 auto to it as well.

Demo:

http://dabblet.com/gist/6523922

Edit///

The div.wrap wraps around the menu.

answered Sep 11 '13 at 13:55

Jacques ジャック

3,682
2
20
43

thanks jack,but its not responsive anymore. the last link 'reach us' is came below the whole container,and when i resize the screen, menus are overlapping on each other. – 8bitrebellion Sep 11 '13 at 14:00
I'll fix it. One sec. – Jacques ジャック Sep 11 '13 at 14:04
http://dabblet.com/gist/6524296 I assumed you wanted the responsive feature to still align left. Guess since you accepted alireza's answer, you wanted it all centered. Oh well. I fixed it anyway with the responsive nav alight left. – Jacques ジャック Sep 11 '13 at 14:21
no offense jack but with ur last solution when screen is half,menus are left aligned but the space is fully covered with black background.it will be in two column then one column.so left over empty space will look bad. whereas in ali's solution while resizing first it will be three column then two column and last one column.check it out.ur made left-aligned text into dropdown,so i will implement ur solution too.thanks for it. – 8bitrebellion Sep 11 '13 at 14:36
pistachio, no offense, but do you not have even a rudimentary knowledge of CSS? If you don't know how to change the size of objects, take a css tutorial. If you do, why is this an issue? I had to go through all of your CSS to make sure it was responsive and not overlapping which it was doing because you had the width set at 24.9% or 34%. I'm glad it's helpful, but we're here volunteering our help, not trying to hand hold people through all their issues. – Jacques ジャック Sep 11 '13 at 14:47
really, i dont have proper knowledge of css, Im student of electronics, i just have interest in web development. So i dont know much about it.I am trying to learn as much as possible. – 8bitrebellion Sep 11 '13 at 14:53
not having the knowledge is fine, but there are tons of tutorials online, just google it. My answer worked for centering, and it works for responsive, the issue you have is with the widths in the responsive portion. I don't know exactly what you want. You said hers gos from three to two, to one. Well hers has just as much black space on the two and one as mine, but hers is centered so it looks like less. Here's a tip, when you ask a question, be very specific, or give specific feedback of your issues. You took her second answer, but didn't give me time to fix what you didn't like. – Jacques ジャック Sep 11 '13 at 14:58
Sorry, her smart a$$ comment pi$$ed me off. – Jacques ジャック Sep 11 '13 at 14:59

score 1 · Answer 2 · answered Sep 11 '13 at 14:22

1

add text-align: center; to .meganizr

answered Sep 11 '13 at 14:22

ಠ_ಠ

1,235
2
17
29

1

@pistachio: because in `.meganizr > li` class you have `float:left` ( remove this) and change `display: block` to `inline-block`; – ಠ_ಠ Sep 11 '13 at 15:12

score 0 · Answer 3 · answered Sep 11 '13 at 13:46

0

add the following code to .meganizr

margin:0;
padding:0;

demo : http://dabblet.com/gist/6523863

answered Sep 11 '13 at 13:46

alireza

507
4
12

sorry u misunderstood i think. i want all the menus in the center,not whole container.sorry, i should have explained it.. – 8bitrebellion Sep 11 '13 at 13:53

score 0 · Answer 4 · answered Sep 11 '13 at 13:48

0

You have to provide a different width (not 100%) for .meganizer + margin: 0 auto;.

answered Sep 11 '13 at 13:48

Joris Lindhout

205
2
9

sorry u misunderstood i think. i want all the menus in the center,not whole container.sorry, i should have explained it. – 8bitrebellion Sep 11 '13 at 13:53

score 0 · Accepted Answer · answered Sep 11 '13 at 13:58

if you wanna make all menus go center add the following code to .meganizr

text-align: center;

then chenge following code with .meganizr > li class

.meganizr > li {
    position: relative;
    display: inline-block;
    height: 37px;

    border-right: 1px dotted #ccc;
}

demo : http://dabblet.com/gist/6524015

navigation menu bar cant be centrally aligned

5 Answers5