Forum Replies Created
-
Posts
-
It looks as if I had found a way to solve the problem of the header overlapping the content on tablets and thus preventing the clickable elements from being clickable. I have set the min-height of the header to 0.
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.html_header_sidebar #top #header {
min-height: 0;
}
}Thank you all for your help.
This topic can be closed.Thank you very much for your help, Mike! It works! I managed to adapt your code to all subsites. Now there is one issue left: On tablets, the clickable elements on https://5gambit.ch/team/ and on https://5gambit.ch/what-we-do/ are not clickable anymore (for example the fist photo on https://5gambit.ch/team/ or the 4 squares on https://5gambit.ch/what-we-do/). It looks as if they were covered by the header.
Any thoughts on this?May I ask again whether anyone could help me with this, please?
A quick recap: The website works fine on desktop and mobile, but not so great on screen-sizes between. Originally I hoped that we could just adjust the mobile breakpoint for it to swap to mobile view on any screens below 1366 px. But that does not seem to be possible.
Since, thanks to the help of Nikko, we have managed to change the logo to the burger menu below 1366px and to put it to the right of the screen. What remains to be resolved:- The title and content need to be aligned left, below the logo on screens below 1366px. It only works on https://5gambit.ch/who-we-are/.
- Also, the logo should not be sticky on screens below 1366px as this leads to the situation that the logo covers the content when the user scrolls.
Thank you very much for your help,
DominicThanks, Nikko. I changed your last code to @media only screen and (max-width:1366px) and that works for https://5gambit.ch/who-we-are/. However, I have not figured out how to adapt your solution to the other pages. For example, https://5gambit.ch/anja-vogt/ has three rows of 1/5, 3/5, 1/5 columns. Do I have to adress your solution to every row and tell it to put the column with the content to 100% width? I have tried that but it did not work.
Still trying to left align the content on tablets on all other pages than https://5gambit.ch/ and https://5gambit.ch/who-we-are/ as they work fine.
Also: The problem with the sticky logo on screens below 1366px remains. The logo covers the content when scrolling on tablets.I really appreciate your help, Nikko. And I am sorry if the layout of my site is more complicated than usual. We’re not quite there yet. The title and content of the sites other than the homepage (for example https://5gambit.ch/who-we-are/) is not left aligned under the logo anymore on screens below 1366px. Also, the logo is sticky now, since I entered your new code. This leads to the situation that the logo covers the content when the user scrolls.
Many thanks in advance for your support.
Best regards,
DominicThank you for this, Nikko. Your code solved the problem with the logo being very big and covering the content on tablets. However, on any page besides the homepage, the content is now not aligned anymore and when clicking the burger-menu on screens between 1366px and mobile view, the menu-items in the flyout stick to the very top. Instead of havin to try to fix all this, would it not be easier to force the exact same view as on mobile starting on screens smaller than 1366px? This would be totally fine and I imagine that it would simplify the task here. So instead of having a desktop view, a tablet view and a mobile view, all this site needs is a desktop view and a mobile view for screens narrower than 1366px. Thank you very much in advance for your help.
DominicThank you very much, Nikko.This works perfectly for the homepage https://5gambit.ch/ because the logo is set to not be visible. However, on any other page, like for example https://5gambit.ch/contact/, the logo now appears huge and over the content of the site, when the screen size is below 1366px.
Also, when clicking the burger-menu on screens between 1366px and mobile view, the menu-items in the flyout stick to the very top now.
May I ask you to have another look please? Thank you.If I was to implement one of these solutions with Java Script, how and where would I need to do that?
Thank you, Mike. The client has since chosen to use a looping GIF animation instead of an animation that only plays once. So, indeed, the problem is solved in this particular situation. Still, it would be helpful for me and other users to know how to solve the problem with a GIF that was exported to not loop which does not play on page reload.
Best regards,
DominicThank you very much for the reply. It works! Great!
One more question: When hovering over a link of the burger menu on desktop (I chose “Display as icon” for the main menu) , I cannot get a change in color of the link. “Font Hover Color” in “Menu Links in overlay/slide out” does not seem to have any influence.
And do you have a CSS-example to get an underline on hover for these links?Thank you,
Dominic
