How can I center menu button for slicknav?

Question

I want to center the menu menu button in slicknav. I tried but nothing works . I can align it to the left but not in center.

sample mark up is here

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

and js

$(function() {
  $('#menu').slicknav();
});

here is codepen link http://codepen.io/anon/pen/oLWpao

yes , at last i soled it , http://codepen.io/anon/pen/OXmQLG — Md. Monirul Alom, Jul 01 '16 at 08:27

Md. Monirul Alom · Accepted Answer · 2016-07-01T08:33:25.623

1

I found solution to my question.

just added some css

.slicknav_menu {
  display: block;
  text-align: center;
  width: 100%;
}
.slicknav_btn {
  display: inline-block;
  float: none;
  text-align: center;
}

This solved my problem.

here is codepen link: http://codepen.io/anon/pen/OXmQLG

edited Jul 01 '16 at 08:33

answered Jul 01 '16 at 08:24

Md. Monirul Alom

275
4
16

score 0 · Answer 2 · edited May 23 '17 at 11:52

Check your browser inspect. All the elements are given a display: block, which gives it a full width. If you set the '.slicknav_nav a' on display: inline-block and the li parent a text-center, everything should be what you want.

.slicknav_nav a {
  display: inline-block; // instead of block;
}

.slicknav_nav li {
  text-align: center;
}

This might be some useful info: What is the difference between display: inline and display: inline-block?

score 0 · Answer 3 · edited Jul 01 '16 at 08:56

0

.slicknav_menu {
    text-align: center;
}

.slicknav_btn { 
    display: inline-block; 
    float: none;
}

edited Jul 01 '16 at 08:56

Timothy

2,004
3
23
29

answered Jul 01 '16 at 08:24

chander shekhar

425
2
10

How can I center menu button for slicknav?

3 Answers3