Top Bar Title on right side?

Classic
1

Would just like to flip the orientation on the basic Top Bar and have the menus on the left and the name on the right. Joe’s site mentions using this.

.top-bar .name img{float: right!important}

But not only does that not seem to work for me (with a Site Logo) but I’m actually just using a site name right now and not a logo.

Sorry, don’t really have an example to post but it seems like an obvious question and I was just hoping for a simple answer.

Looked at BWD Top Bar Surgeon but didn’t find what I was looking for.

Thanks. And sorry if this is obvious and I’m just missing something simple.

2

Try this code instead:

.title-area {float: right!important}

If you give me the link to where you got that code, I will go and change it.

1 Like
3

Thanks Robert! That did the trick!

Here’s where I got the earlier tip.

1 Like
4

Thanks, I think that still works, but I will amend that FAQ about moving the Title and slogan as well.

5

Of course now that I play with it I’m realizing that I have to move the mobile menu (hamburger) to the left side now. Is there another piece of magic CSS for that?

6
4 Likes
7

Thanks so much Andrew. Very helpful. And it does exactly what I want (name on right, hamburger on left) except when I get to Desktop size at which point it flips back to name on left, full menus on right.

Is there a simple way to keep everything consistent on one side throughout all sizes?

01%20AM
01%20AM874×1398 277 KB
14%20AM
14%20AM2140×872 354 KB

8

Sorry meant to add a url.

Here’s one.

http://lobelpost.com/lrt/

9

You just need to restrict the title area float right to above the breakpoint where the desktop menu is used.

You will need to change the 1000px to match whatever your custom breakpoint is set to in the topper stack settings - I guessed at 1000px from your page without measuring it properly.

This should be all the CSS you have for topper - make sure this does not duplicate what you have done already - best to delete that and paste in this wholesale.


@media all and (min-width: 1000px){
.top-bar>ul.title-area{
	float:right;
}
}
.toggle-topbar {
left: 0!important;
right: auto!important;
}
.top-bar .title-area>.name{
text-align:right;
}
2 Likes
10

Too cool!

Thanks so much Andrew. You rock!

11

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