Bootstrap navbar toggle button is not centered with the logo

HTML & CSS
,
1

The navbar button is positioned near the top, trying to get it evenly centered so it looks good next to the logo. My CSS:

.navbar-toggle {
    position: relative;
    float: right;
    padding:9px 10px;
    margin-top: 12px;
    margin-right: 15px;
	margin-bottom: 12px;
    border-radius: 2px;
        background:#333333;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}
2

Do you have the html that goes with that, or maybe a link to the actual page?

3

The site is sold my mac dot com

4

As it is, it’s floated right.

.navbar-toggle {
    float: right;
}

Removing that, it will sit next to the logo on the left.
Not sure if that is what you want.

If you add:-

.navbar-header {
    text-align: center;
}

…it will centre in the space right of the logo.

5

How do you recommend I style it? Do I remove the CSS rules I added in this post or just add those to custom.css?

6

I’m not too familiar with bootstrap. So to play it safe and not break anything, you could add some rules after the existing css to override the current behaviour.

.navbar-toggle {
    float: none; /* remove the float */
}
.navbar-header {
    text-align: center;  /* centre it */
}
7

Ok I added that, please have a look and let me know. Thank you very much! :sunglasses:

8

That looks the same as it did for me editing it in the dev tools.
The question is: is that how you wanted it?

9

I just wanted it centered, thanks for the help. It will do for now.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.