Top Bar Help

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 1 month, 2 weeks ago.

Author Posts

andrewpeters

Hey there! I’m on the struggle bus getting this top bar correct. :/

I have two rows. the second row has an element with a neg marg that makes it overlay on the top row a bit.
I’m looking for a way to position the content in that top black bar relative to the logo overlaying the top bar. But since they are in two different rows, I’m not figuring it out. :/ Trying to use Flex to position stuff but the elements just keep overlaying each other and I can’t seem to pinpoint why. :/

Basically, trying to get the tagline pic 20 px left of the logo, and then get the rest of the stuff aligned right and aligned with the edge of the menu.

Any help would be SO MUCH appreciated.

Jelf.thereachco.dev


Sebastian

Hey Andrew,

I’m so sorry I missed this before. If you’re still on the bus, please post a link to the page you’re working on.

Thanks,
Sebastian


andrewpeters

Hey Sebastian!

I worked it out, but I think there’s got to be a better way to do this top bar the way they want it. :/

jelf.thereachco.dev


Sebastian

Ah, I’m glad you worked it out. In what way would you like to improve your current implementation?

And should I be looking at mockup one or two?

Cheers,
Sebastian


andrewpeters

Hey Sebastian.

Improvement, Im’ honestly not sure about. I think I just have too much CSS written for it and thought there was maybe a better implementation that what I wound up with.

I am having issues with the speech bubble in the hero section not overlaying the logo like it’s supposed to. I’ve tried every container there with position: relative; z-index: 999 but nothing seems to take. I have been able to add it to the .fl-row-content but then my menu items become unelectable. :/


Sebastian

Hi Andrew,

1. If you think you’ve added redundant CSS styles, you can disable selectors via the selectors menu. See the icon when hovering over a selector name. If the styling looks fine after deleting a selector, you can delete it.

2. z-index can be tricky sometimes. Especially when elements are not close to each other in terms of the HTML code. Could you try adding the speech bubble to the same column as the logo (just afterwards), and then using absolute positioning to align both of them?

Cheers,
Sebastian

P.S. you may want to read on of our recommended tutorials on z-index (I have to remind myself from time to time).

You must login or register to reply to this topic.