-
Posts
-
Hi,
I am trying to have the secondary nav showing on top only when on mobile with phone number (sticky) so it always stays on top and have the main nav (the one below the logo) disappear when the mobile is active.
( I removed the menu toggle since there is not need because of the sticky top bar with the secondary nav.)As you can see the spacing/margin between the secondary nav tabs is too much/wide and line height too big.
The Logo gets hidden under the top bar since it increased the size on mobile.
I tried to figure this out, but I could not find it in the forum.Social icon (facebook) overlaps the main logo on mobile.
How can I fix this?
Thanks
MonicaHi mmcc!
Add this to your custom CSS.
@media screen and (max-width: 767px) { #header_main { display: none !important; } }Best regards,
ElliottI am not sure what you are answering since that part was already done as you can see on the site.
I was asking how not to make the logo hidden under the top bar and to fix the social icon overlappingElliott, I was asking
-“the spacing/margin between the secondary nav TABS (on the top bar on mobile view) is too much and line height too big.
-The Logo gets hidden under the top bar since it increased in the size on mobile.
-Social icon (facebook) overlaps the main logo on mobile.
Any way to resolve this?Thanks
MonicaHi!
Please add following code to Quick CSS
@media only screen and (max-width: 768px) { #header_main { padding-top: 60px; }} @media only screen and (max-width: 634px) { #header_main { padding-top: 100px; }} @media only screen and (max-width: 480px) { .responsive.html_header_top #header_main .social_bookmarks { display: block; }}Best regards,
YigitYigit,
thank you so much it work great, but the Facebook Icons still overlaps the main logo in mobile.Haw can I fix that
Hi,
Please try the following as well:
@media only screen and (max-width: 767px) { .responsive.html_header_top #header_main .social_bookmark { right:0px !important; } }Best regards,
RikardYigit,
thank you for the quick response. At this point I would rather complety remove from the MOBILE version the social media from the top so the logo aligns in the middle instead of being pushed to the left. What do I have to do in order to obtain that result?Thanks
MonicaHey!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) { #header .social_bookmark { display: none !important; } }Regards,
YigitHi,
I can only see a coming soon page so we will need admin login details, please post them in the Private Content section of your reply.
Best regards,
RikardSorry I just made the site live and moved it to the right domain name.
also the Facebook icon is not showing in Chrome.
I tried myself to center the logo on ipad and mobile. looks that works, but not sure that I did it correctly.I figure out why the icons in fontello ( social media etc) are not showing. I blocked access in wp content to all the images with the htaccess and now the fonts ( of course) are not loading. so I have to actually made those not icon fonts, but images.
Hey!
This code should fix the logo and top bar issue on mobile:
@media only screen and (max-width: 480px) { #header_main { padding-top: 120px; left: 8%; } }There’s a better way to center align the logo but since you’re using css left property, we’ll use that again. Please add the code at the very bottom of the Quick CSS field.
I’m sorry but I’m not sure if I understand the social icon issue. Or did you figure it out?
Best regards,
IsmaelHi,
@studioem please open a new ticket, with your web site so we can give it a look for you.
Thanks a lot for your time and patienceBest regards,
Basilis
- You must be logged in to reply to this topic.