elements overlapping bug in header

Hi Ismael,
Thanks for your reply.

1. Related to the first, the logo/menu issue, I already had this option changed. But still it’s overlapping. It actually depends on the layout width and the amount of menu items in the navigaiton and seem to be positionned absolute. I would suggest to float the navigation relative to the logo to get it below it, as soon as they conflict each other. Alternatively, when pushing the browser window together, I could imagine to stop the dinamically adapting witdth when the Logo and menu get in conflict with each other and make it a fixed width until the mobile menu apears.

2. Related to the second title/bredcrumb issue, I changed your code slightly, as the alignement was not correct on the left:

@media only screen and (max-width: 1024px) {
.responsive .title_container .breadcrumb {
position: relative;
right: auto;
top: -6px;
margin: 0;
left: -2px;
}
}

But unfortuetelly it still overlaps on the page http://www.ergoschiers.ch/?s= . As it looks, the elements are behaving dependent on a predefined width. Again, I think it would make more sense if they floated relative to each other – move the bredcrumbs to the line below, as soon as they get in conflict with each other.

Any more suggestions on how to solve this?

Thanks!

• This reply was modified 10 years ago by albiurs.

Hi Andy,
To be honest, it’s not really the solution which makes me happy :-( . I’ve chosen Enfold, as it’s actually one of the most beautiful themes out there! A Workaround, which breaks the harmony of a layout, is definitively not the way I want to go. In my opinion it’s actually a matter of layout concept. Enfold claims to be a responsive theme, but overlapping objects actually violate the concept of responsiveness. Even if I did as you suggest with moving the logo to the left, if my customer starts to add more top-level pages on the site, it’s overlapping again. I’ve built another site with one of your competing themes “the7” at http://www.fasnachtlandquart.ch. Have a look on how the navigation behaves if you push the browser together. The navigation elements, which do not fit into the width, are floating down to the next line and even the drop-down navigation of the second element works, with any further elements below it. Hence, independently of how many items one creates, the layout will never be broken. That’s responsive layout… :-)

For the second suggestion, it actually works and it’s fine for a small screen width like a tablet, if the breadcrumbs are below the title. But on large screen sizes, it looks by far not that nice, as if the breadcrumbs are on the right.

Why are the layout elements (logo, navigation, title, breadcrumbs and probably others too) not behaving relative and floating to each other? Is there an easy way to do it?

I hope you don’t take my criticism wrong! I really love the theme, as I mentioned, It’s definitively one of the most beautiful themes out there! The criticism is meant as a positive feedback to improve your product…

Thanks for you support, I highly appreciate it

Hi Andy,

Thanks. But you actually didn’t reply to my question above. Did you actually read what I’ve written? Please read it (again) before continuing here ;-) .

Whether I move the logo more to the left or the navigation more to the right, it actually doesn’t solve the issue. Apart from the fact, that it looks awful if the logo/navigation are not aligned with the content below them, the overlapping issue will still be the same. If my customer adds more top-level pages and/or the screen/browser size shrinks, the logo and navigation will ever overlap. At least as long as you don’t make major changes to the css! The elements should float relative to each other instead of relative to the div-container where they are placed in. So could you please replay to this question?

Why are the layout elements (logo, navigation, title, breadcrumbs and probably others too) not floating relative to each other (instead of floating relative to the parent div-container)? And is there a way to make them floating to each other?

Thanks,
Urs

Hey guys,

So far I got a lot of workarounds, but, even after repeating and clarifying it several times, nobody actually answered to the question I asked. Hence, I guess, it’s either not possible or I asked a very difficult question which nobody really understands.

Finally, I fixed the theme now with unsatisfying workarounds, which actually are not waterproof:
– If my customer adds more sites in the top level, the logo and navigation will overlap again.
– If the customer adds more sub-sites, the breadcrumb length will increase and it will overlap again with the title.

So, please do not suggest any more workarounds, I have by far enough of them now. But, just in case somebody really understands my question above, it would be really great, if the issue would find the way into further developments of the theme and gets REALLY fixed in one of the future updates (not just with workarounds). Otherwise, I consider it as unsolved and you can close this topic.

Best wishes,
Urs