-
Posts
-
I wanted to have the logo further left in the desktop view.
However, in the mobile view and sometimes the desktop view if the browser gets resized smaller it gets cut off. How can I prevent this?
I would prefer that under the mobile view the logo stays positioned in the middle like it originally did.
Website: http://bit.ly/1gFTkgY
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) { .bottom_nav_header.social_header .logo{ left: 0 !important; } }Cheers!
JosueJosue,
This works on the phone well thanks.
Only issue I’m having is my logo seems to be acting funny on the desktop view when the browser is not at full width and more like a 4:3 width. Please try adjusting your browser over and see what I mean.
Ahh also the phone number begins to overlap the social icons.
Thanks.
Hey!
Try adding the following for the number issue:
@media only screen and (max-width: 1139px) { .sub_menu{ right: 14%; } } @media only screen and (max-width: 989px) { .sub_menu{ right: 18%; } }The logo behavior was expected due to its being pushed 99px left, so in smaller screen there is a moment when there is no more space left, i think it would be better to disable that feature earlier, you can do it by changing the code i gave to you to:
@media only screen and (max-width: 1200px) { .bottom_nav_header.social_header .logo{ left: 0 !important; } }Regards,
JosueJosue,
Looks like this is doing the trick.
The only thing that still is a little odd is the phone number still overlaps on the social media icons. Also the phone number disappears in mobile view.
Any idea how I can bring it back to mobile view it basically disappeared.
Thanks!
Hey!
Please add this to fix the social media overlapped:
@media only screen and (max-width: 989px) and (min-width: 768px) { .social_header .phone-info span { left: -50px; position: relative; } }Add this to show the phone number on mobile view:
@media only screen and (max-width: 767px) { .responsive.social_header .phone-info { position: relative; top: 10px; left: 25%; } #header_meta { margin-top: 0; } #header_meta .container { margin-top: 0; } }Cheers!
IsmaelHi Ismael,
Thanks for that, the positioning of the phone number is much better now.
The phone number does not appear to be showing up still in mobile view when I added that code can you take another look please?
Thanks!
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) { #header_meta, #header_meta .container { margin-top: 0 !important; } }Cheers!
JosueJosue,
That worked, the only thing that happened was the Phone number seems to be floating on the right in mobile view? How do I get it to position centered above the Logo?
Also, I need the background to be white where the phone number goes on the top.
How could I add this image alongside of the phone number in line with it http://bit.ly/1mVqzEt it looks a little dry the way it is right now and need to make sure the image looks ok at the top in mobile view too.
Thanks!
Hey!
Change the code to this:
@media only screen and (max-width: 767px) { #header_meta, #header_meta .container { margin-top: 0 !important; background: white; } .phone-info{ left: auto !important; } }Regards,
JosueThat worked, any way I can get this image to the left of the number: http://bit.ly/1mVqzEt without it throwing everything off. I did insert it before but then the image, phone number went all the way down to the bottom of the header and not in line with the social icons.
Hey!
Add this:
@media only screen and (min-width: 990px) { .phone-info:before { content: url(https://bit.ly/1mVqzEt); position: absolute; top: 45px; left: -55px; } }It won’t appear in smaller screens because there is not enough space for it.
Best regards,
Josue
- The topic ‘After adjusting logo position further to Left now gets cut off on Mobile view’ is closed to new replies.