-
Posts
-
I am using the 4.3 version of Enfold. The initial page to the site on mobile should display the logo above the slider, with the logo appearing centered and to appear as wide as the slider. Then, I would like to place the hamburger icon above the right portion of the logo. When the logo enlarges to the width of the slider, some space will become available above the letter “Z” at the end of the logo to position the hamburger.
How can I do this?
The sample mobile page is located at:
https://new.namzcustomcycleproducts.com/mobile-splashHey JZNAMZ,
Could you please attach a mockup of what you’re trying to achieve? It is not very clear from your description above.
Best regards,
Victoria
I want the logo that appears in the upper-left corner to be as wide as the slider, so the logo should be equally as wide as the white background you see being the slider. And the hamburger menu should sit precisely or float in the black space about the letter “Z” in the NAMZ part of the logo.
Hi,
Thanks for the update. Looks like you managed to adjust the width of the logo. Please use the following css code to create some space between the logo and the main content.
@media only screen and (max-width: 767px) { .responsive #top #main { padding-top: 50px !important; } }Best regards,
IsmaelI updated the theme today to the latest version, and now the logo is not correct on a specific page that only shows on mobile. The graphic above shows the logo on the left with the hamburger menu on the right. The page now looks like the image above, but I want to have the logo appear as wide as the white rectangle of the slider.
I forget what I had modified before, but I was able to have the logo appear at the same width as the white rectangle of the image slider, and once the logo was enlarged to this size, the hamburger menu was able to appear in the black space above the letter “Z” in the logo.
The sample mobile page is located at:
I can use the following code to hide the logo based on a CSS media query. If I then put the logo onto the page using the page builder, the logo is blocked by portions of the header.
@media only screen and (max-width: 767px) { .responsive #top .logo { margin-top: 15px; } .responsive .logo img { display: none; } }Link to mobile sample page:
https://new.namzcustomcycleproducts.com/staging/mobile-splashIf I add some more CSS to set the z-index to 1 for the header, the logo placed as a page element now displays as a complete image.
I would rather do some modifications that go along with the theme architecture.
Let me know what other approach can accomplish this reliably for all mobile devices.
@media only screen and (max-width: 767px) { .responsive #top .logo { margin-top: 15px; } .responsive .logo img { display: none; } .responsive #top #wrap_all #header { z-index: 1; }I just realized that I can not include the logo as a page element because the hamburger menu doesn’t display correctly.
I need to have the logo display centered and full width in the header.
I removed the quick CSS as mentioned, but the logo is not appearing as wide as the slideshow.
The logo is in the upper-left portion of the viewport.
Can I get the logo to appear centered and to appear as wide as the slideshow (on this mobile-only page)?
The mobile page is located at:
https://new.namzcustomcycleproducts.com/staging/mobile-splashI am getting closer to the desired result.
I want to hide the hamburger menu on this specific page.
I tried using the following code within the quick CSS and within the media query for 767px.
.page-id-4988 .responsive #top #wrap_all .main_menu { display: none; }
- You must be logged in to reply to this topic.