-
Posts
-
On my site I have the header with the brand on the left side, text menu and icons of the social networks on the right side.
On the desktop it is possible to visualize the brand, the menu and the icons of the networks (all the items).My client questions that using the Iphone 7 that the icons of the networks disappear, leaving only the brand and burguer menu.
How to make everything visible? I created the template for how the customer expected to see the menu.
link demo
https://d.pr/JTmqHMToday is like that with the huge brand on the screen and the menu burguer.
LINK VIEW
https://d.pr/7lAsvfHey,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
@media only screen and (max-width: 480px) { .responsive #top #header .social_bookmarks { display: block!important; }}Best regards,
YigitHi Yigit. What a good help you gave me. I need your help. See the Iphone screen after entering your code.
How do I leave the brand lower on the Iphone? The brand is too big.
IMAGE DEMO
https://d.pr/0PTjb4Hi,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width: 480px) { .responsive #top .logo img { min-height: 65px !important; width: auto !important; } }Hope it helps :)
Best regards,
NikkoNikko, the brand got smaller and it’s ok for me. The problem now is to align the elements. Note that the menu burguer is in the center. The mark is below and the icons of the networks are up.
1 – How to centralize these elements horizontally?
2 – How to leave the icons of the networks bigger?
LINK IMAGE
https://d.pr/4719VgTks you and Yigit
Hi,
Thank you for the info.
We’ve adjusted the css codes in the Quick CSS fields according to your specifications. Please remove browser cache prior to checking the page.
Best regards,
IsmaelIsmael, thank you very much for your help. You are grade 10.
Can I make you one last order?
Network icons need to get a bit bigger on devices. It’s barely visible on an Iphone, for example. How to do this?
I will test on the Ipad to check it also.
It is possible to put the menu burguer on the right or left side of the header on the devices. Note that it is in the middle between the brand and the icons of the networks. I made two demos. Tell me what you can do.
I just noted that the menu does not create the menu burguer when the iPad is in ladscape. See picture.
LINK
https://d.pr/SZmtNPHi,
This particular css modification should increase the size of the icons.
#top .social_bookmarks li a { width: 40px; line-height: 40px; min-height: 40px; font-size: 18px; } #top .social_bookmarks li { width: 40px; }Add this css code inside the css media query to move the burger menu to the right side of the icons.
.av-main-nav-wrap { float: right; }Best regards,
IsmaelIsmael, the social net icons code did not work. I changed the values and nothing happened.
How do I make the menu on the iPad to burguer? I mean the landscape position. Look at the picture as it is.
https://d.pr/udJYGoWith the Ipad upright, the menu leaves a space to the left of the mark and to the right of the icons. You can get closer to the side (mark and icons). If we do this the menu will look better on the Iphone.
iphone – https://d.pr/pcMV7R
ipad -https://d.pr/gP03sGThe social bookmarks code only changes the size of the icons on the desktop. In the devices nothing changes.
Hi,
We would like to apologize for the late response. Did you set the Main Menu > Menu Items for mobile to the second option (Activate for Smartphones and Tablets (browser width below 990px))?
Best regards,
IsmaelHello Ismael. Yes, this option is checked on the system. This option does not work on the Ipad. Watch the video below. The menu is above the mark when the iPad is lying down (landscape view).
VIEW CONFIGURATION
https://d.pr/sZ4XhWVIEW THE VIDEO DEMO
https://d.pr/eZjd0QHi,
Thank you for the update.
Use this code to display the mobile menu once the screen width is less than 1200px.
@media only screen and (max-width: 1200px) and (min-width: 768px) { .responsive #top .av-main-nav .menu-item-avia-special { display: block; } .responsive #top .av-main-nav .menu-item { display: none; } }Best regards,
IsmaelMany thanks, Ismael. One less problem on this site.
Much obliged
See the other tickets for me. There is little left.
- You must be logged in to reply to this topic.