Add site logo and align

To add a logo to the Toolbar, you could use a custom menu. If you don’t want a dropdown menu on it, use a one-item menu. If you don’t want a link over that icon, first create your menu item with any URL (homepage for instance), then edit the menu item and remove that link.

To add an icon to your menu, and as described in the User Guide §4, upload the image file somewhere on your server, and add the URL to the field “custom icon” of that menu.

As far as alignement, if you mean like what’s on www.remarpro.com / BuddyPress / bbPress, you could add custom CSS like so:

#wp-toolbar {
width: 960px;
}

I’ll see if I can add it to the plugin. I’m a bit concerned that it may be too theme-dependent, and break responsiveness…?

I’ll test adding a logo today thanks. I’m don’t really want to adjust the width of the toolbar – I wanted to use Symposium to create the kind of fixed header users see on Facebook or Twitter. And it makes more sense to use the toolbar for this as the user account links are already part of it. If I can’t align logo and menu links for larger desktop displays, I’ll have to write my own fixed header with css.

I’ve had interesting results by using max-width instead of width:

#wp-toolbar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1040px;
}

1040px being the width of your page content. Also note I’m addressing the div.quicklinks, not the whole Toolbar.

Thanks, I’ll have a look at this shortly.

That’s the sort of thing I’m looking for but I’d like the user account menu to stay in the left corner to prevent masking content as a drop-down. If I remove max-width, I can align the account menu with #wp-toolbar.quicklinks and some padding. If I could figure out the selector for a custom menu, it should do the same thing.

Sure, if you align the quicklinks so they fit the page content, dropdown menus will mask it ??

Custom Menus added by WPS Toolbar have their menu ID as selector, it may look weird or ugly but it ensures unicity. So it gives, as an exmaple: #wp-admin-bar-30, and the dropdown menu underneath would be #wp-admin-bar-30 > .ab-sub-wrapper

I saw the menu ID’s acting as selectors earlier. My main menu (as seen when logged-in) is made up of parent items, therefore multiple selectors. I don’t know how I can pad or apply a margin to these links so they site above the main content?

While leaving the User Menu in its upper right corner ? You could address div#wp-admin-bar-root-default, the container for the left-side menus:

#wp-admin-bar-root-default {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1040px;
}

Just tried that, as above, but the menu (main navigation) remained upper left. Also tried removing the max width and increasing the margin and padding…

Try adding “!Important” to the margins…?

Yeah that’s working. Thanks for sticking with this ??

You’re welcome.

FYI and as an outcome of this case study, I’ve added a setting to limit the width of the items’ container #wp-toolbar, so admins can align Toolbar items with page content. Not quite exactly what you end up with, but I thought it could be of interest to others.

That’s in the development version just updated, and will be in next release of the plugin, Styles tab, Toolbar Items section, Max Width.

Hi Guillaume,

The items container sounds like a good idea. I’ve also had problems aligning items for different screen sizes. Think I have a workaround but any other suggestions would be welcome.

Do you know why the menu items on the toolbar are aligned differently for visitors and logged in users? If I apply styling to force for visitors, this has a knock-on effect when logged in.

Your account still works, advice would be welcome ??

https://falcon.everygoalmatters.com

Thanks,
Paul.

Hi Paul

Quick question as a preamble, you’re not using WPS Toolbar to style the Toolbar, are you ? I’m asking this, because I don’t see what would then be added to the page by the plugin, when picking custom CSS from the “Styles” tab.

There’s no real way to get Toolbar items centered that I can think of. As far as your question regarding items alignment – the height of the ab-item should be 40px high, in your case they aren’t for visitors, you could try

#wpadminbar #wp-toolbar > ul > li > a {
    line-height: 40px;
}

Actually, I’m not sure why it works for logged-in users, this file adminbar-38.css, is that yours ? Is it loaded for visitors ?

AG

PS on wp-login, the link over “ECM” goes to WordPress
PPS sorry for England. Fingers crossed for France ??

Hi Guillaume,

I added the CSS you suggested and it was better, but it seems good now after I set the toolbar height in WPS Styles.

I can’t figure out where the hover behaviour over the logo is coming from? I’ve set the default Login / Register links to display:none and that works, the Logo menu is a custom link with no URL? I’m confused?

I’ll be changing the admin panel and removing the ‘Powered by WordPress’ text. I intend for the users to never see it once I had some custom redirects.

England play well and with plenty of passion (despite what some fans think), we lack the edge between winners and losers. I think Rooney called it “nastiness”!

France look a very good team, quick and well balanced. Really enjoyed the Switzerland game. You look a better team than Brazil or Argentina for sure!

Can you see what’s causing the hover behaviour over the logo?

Thanks,
Paul.