-
Posts
-
I updated the theme from version 3.x to the latest version. Most of it seems to be okay, except some of the custom css I added through the Extra CSS in the Customizer was suddenly missing. I added it back from a copy I saved, but I can’t seem to fix the responsive menu.
This is how it worked before: https://web.archive.org/web/20190601211012/https://allesoverhoofdpijn.nl/
But now when viewing the browser in different widths, there are now TWO hamburger menus instead of just one.
The location I would like to have the hamburger menu is in the center beneath the logo.What do you mean with archive?
I only added back the missing css from the previous version of the site, that is before the update.Hi webmasterynl,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaOfcourse and thank you. By the way, tried a few other things and removed all previously added CSS that concerns the header and the menu.
Now the situation is like this:– the hamburger menu comes in too late (can’t find a place were I can set a break point)
– the hamburger menu and social icons are placed on top of the logo instead of beneath the logo
– the logo is not centered when on mobileHi,
Thanks for the update, please try this in Quick CSS:
@media only screen and (max-width: 990px) { .html_header_top.html_logo_center .logo { left: 0; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); } } @media only screen and (max-width: 870px) { .logo img { max-width: 70%; } }I don’t think you can have a centered logo on mobile unfortunately, since there’s not enough room.
Best regards,
RikardHi Rikard,
Thanks for your help.
In most other themes I used the hamburger menu slides beneath the logo so the logo is centered at the top. :( I have been trying things like using clear:both for the logo and the hamburger menu, but I have not been succesful in doing so.
There is still the thing that the tablet/mobile breakpoint needs to be set to 1100px and I can’t see a setting in Enfold where I can do this.
I find it hard to comprehend why it worked well in version 3.x like how the homepage as it was on June 1st like shown in the Waybackmachine: https://web.archive.org/web/20190601211012/https://allesoverhoofdpijn.nl/
As you can see, the hamburger menu slides to a new and better position and shows up at the right browser width.
Hi webmasterynl,
Please try the following css instead:
@media only screen and (max-width: 990px) and (min-width: 480px) { .html_header_top.html_logo_center .logo { left: 50%; -webkit-transform: translate(-65%, 0); -ms-transform: translate(-65%, 0); transform: translate(-65%, 0); } } @media only screen and (max-width: 767px) { .responsive .logo img { width: 70%; } }Best regards,
VictoriaIt’s better :) although I don’t see why it is not possible to have the hamburgermenu above or beneath the logo, and then the logo can remain 100% width on small screens. I tried adding clear:both in a lot of different locations but with no success so far.
I still see at some point that the hamburger menu is overlapping the logo, or the hamburger menu and/or social menu is too big. Or the social menu should disappear sooner.
Also the breakpoint should be 1100px for the main menu, As you can see now the menu-item Contact and the search icon are being moved to a second line.
Hi webmasterynl,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 1024px) and (min-width: 768px) { .responsive .logo { margin-top: 15px; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
I added the code and it seems to be better now. Thanks.
About the breakpoint. I always decide on what breakpoint to use depending on the width of the main menu. In this case that is 1100px where the menu should be disabled and the hamburger menu should become active.
In a lot of themes and frameworks that I use(d) I can register two or more breakpoints. Not for tablet or smartphone (because they can have all kinds of different pixel dimensions) but in actual pixels which is much better. At this moment when making the browser width smaller in Firefox the buttons Contact and the search icon drop to a second line, in Chrome only the magnifying glass.Hi webmasterynl,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1100px) { nav.main_menu, #menu-item-search { display: block !important; } .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } #header_main_alternate { display: none; } .html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main { padding-top: 170px; } .responsive .header-scrolled .logo { margin-top: -5px; } }If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.