Center Navigation without Moving Logo

BB Theme
1

Hello

is there any way to center the navigation items while leaving the logo on the left side?

Thanks
Cody

2

Hey Cody,

Yes, you can center the navigation menu in the theme settings > header > menu position. If you change that to centered, that should get you going. Let me know if you have any troubles with that.

Best,
Billy

3

hi billy,

Am having some difficulty doing this as you described. I want the logo left, social links on right side, and menu centered below.

I don’t see this:
theme settings > header > menu position

all I see is
header layout>layout>none,nav bottom, nav right, nav centered

problem is that nav bottom leaves logo left (which is right), but menu is aligned left
nav center makes nav center (correct), but then also centers logo, which is not how I need it.

what am I missing?
thx
-matt

4

Hey Matt,

I see what you mean. That isn’t possible out of the box, you’ll need some CSS to do that. If you want, go ahead and set the header layout to nav bottom. From there, you can target just the menu with CSS. Do you need some help with how to do that?

Best,
Billy

5

that’s what I did, but yes would love some help with that. I have tried but having trouble.

I added this but don’t think it’s correct

@media screen and (min-width: 800px) {
ul#menu-primary-menu-1.navbar-nav {
float: none;
width: 100%;
margin: 0 20%;
}
}
@media screen and (min-width: 400px) and (max-width: 799px) {
ul#menu-primary-menu-1.navbar-nav {
margin: 0 3%;
}}

here’s site

6

Hey Matt,

Would you mind temporarily removing your CSS for now. I’ll do some inspecting and get you some new CSS to insert.

Best,
Billy

7

sure. done. thank you!

8

Thanks, Matt! Can you also shoot me over temp admin access? Sorry, should have asked for that in my last message!

Best,
Billy

9

[Content Hidden]

10

Hey Matt,

I’m running behind today and having trouble finding time to take a look at this for you. You mind holding until tomorrow morning? I’ll have Ben take a look first thing.

Best,
Billy

11

sure thing. thx

12

Hey Matt,

Try the CSS snippets below and see if it works for you!

@media (min-width: 768px) {
  .fl-page-header-primary ul.nav {
    float: none;
    text-align: center;
  }
  .fl-page-header-primary ul.nav > li {
    float: none;
    display: inline-block;
  }
}

Ben

13

hi ben,

tried it but it doesn’t do anything

14

oops. my bad. copied it from email
now that I copied from the post it works. bad character

thanks!!

15

btw, I would add that to your snippets section, since I would think many people could use it :slight_smile:

16

Hey Matt,

Glad it worked! Yep, I already got this on queue. We’ve been swamped lately I haven’t been able to add articles there. But will do when I get a chance! :slight_smile: Enjoy!

Ben

17

added it to the BB facebook group. you guys rock!

18

Hey Matt,

Thanks for that! Really appreciate it. :slight_smile:

Ben