HTML5 side-nav, menu hamburger overlaps in tablet medium

[ChoccieMuffin]

Hi folks

Using HTML5 side-nav, I have added the company logo to the skin in the usual place (it's disguised as a lime green box in this screenshot), and in the Tablet medium I have added a hamburger button for the Navigation Slide Out Button.

Hamburger_overlaid.jpg

But, as you can see, the hamburger is on top of my logo. Any tips on how to get the blasted things to behave themselves and give each other a bit of room? I've looked at Inspect Element in the built output in Google and frankly I just don't understand what I would need to add to my Tablet medium in my CSS to get them to move apart. Any suggestions?

GoogleInspect.jpg

[NorthEast]

In the skin, go to Styles > Logo > Alignment, and set the Horizontal alignment to middle or right.

By default the logo is on the left because the hamburger icon is on the right.
Still, I'm sure MadCap could improve the skin CSS so they don't sit on top of each other.

[ChoccieMuffin]

Just tried that. No difference. VERY frustrating, because I'm so very close to what I want, it's just that last couple of inches (or millimetres in this case) that are stopping me from finishing.

[NorthEast]

Just tried that. No difference.

You sure? Works fine for me.

[ChoccieMuffin]

I was too quick and rebuilt before I'd saved it! D'oh!

But actually, I don't WANT the logo in the middle, just about an inch indented so it is beside the hamburger.

[NorthEast]

I was too quick and rebuilt before I'd saved it! D'oh! :roll:

But actually, I don't WANT the logo in the middle, just about an inch indented so it is beside the hamburger.

Well, you can't set that in the skin editor, so you'd need to add your own hacky CSS to move it; e.g.

Code: Select all

.logo-wrapper { padding-left: 2em; }

[ChoccieMuffin]

I was too quick and rebuilt before I'd saved it! D'oh!

But actually, I don't WANT the logo in the middle, just about an inch indented so it is beside the hamburger.

Well, you can't set that in the skin editor, so you'd need to add your own hacky CSS to move it; e.g.

Code: Select all

.logo-wrapper { padding-left: 2em; }

Dave, I'm a great believer in hacking CSS to get things done. I knew something or other in that CSS needed twiddling and tweaking, I just couldn't figure out what.

I definitely owe you a pint or two, that worked brilliantly!