Primary Menu Navigation

Shapely
1

Hi all. Maybe this is by design, or maybe it’s a bug, but when I add enough menu items to the primary menu so that it “wraps” and takes up two lines, the alignment switches from right to left.

See the default right align example on my test page - http://clearcaredental.arleenwest.com/
See what happens with a two line menu on my live page - http://clearcaredental.com/

From what I can see, the underlying CSS code in the two pages is the same.

I hate the way the left aligned menu looks. Please tell me if there is something I am missing, or can do to fix this.

Thanks.

2

Hello,

I hope you are doing well today.

You can use the following CSS code to have the menu use the full width available by going to Appearance > Customize > Additional CSS and pasting it there.


.container.nav-bar {
    width: 100%;
}

I would recommend using drop down menus as filling the menu with items will push it more to the right.

Best Regards,
Support

3

Hi and thank you.

The code you recommended made the navigation bar look neater, but it is still aligning on the left. I’d like it to right-align, further away from the logo

I’m already using drop-down menus. I can’t use any less than there are.

Thanks again.
Arleen

4

Hello,

Just to be clear, you want to shift the menu items to the right and leave the logo icon alone?

Best Regards,
Support

5

Hi.

Yes, that’s correct.

Thanks!
Arleen

6

Hello,

You can use this css to add some padding to the logo image:

@media only screen and (max-width: 600px) {
#site-navigation .module.left {
    padding-left: 91px;
}
}

Best Regards,
Support

7

Hi and thanks for that but it is still not working.

8

Hello,

Please remove the previous CSS and add this one instead:


#site-navigation .module.left {
    padding-left: 91px;
}

Best Regards,
Support