CODEWITHSUNDEEP
htmlcssmegamenu
8bitrebellion
8bitrebellion

Reputation: 180

navigation menu bar cant be centrally aligned

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?

Upvotes: 0

Views: 171

Answers (5)

ಠ_ಠ
ಠ_ಠ

Reputation: 1235

add text-align: center; to .meganizr

Upvotes: 1

alireza
alireza

Reputation: 507

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

Upvotes: 0

Jacques
Jacques

Reputation: 3774

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.

Upvotes: 1

Joris Lindhout
Joris Lindhout

Reputation: 205

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

Upvotes: 0

alireza
alireza

Reputation: 507

add the following code to .meganizr 

margin:0;
padding:0;

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

Upvotes: 0

Related Questions