Top Bar Help

Author Posts

andrewpeters August 7, 2019 at 9:40 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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 August 27, 2019 at 4:39 pm

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 August 27, 2019 at 5:46 pm

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 August 28, 2019 at 11:33 am

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 August 30, 2019 at 4:07 pm

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 September 2, 2019 at 10:57 am

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.