Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 8, 2017 at 4:17 pm #744401
    NicomIT

    I’m having some issues with how the header area is displaying in something I am working on. The secondary menu, social media links, mobile menu and logo aren’t stacking/displaying very well when you are viewing the website around a 758px screen/device size of lower. I’ve tried to fix it but haven’t had any luck. It also looks as if in a browser on my PC the logo is aligning to the right and is keeping you from being able to click on the mobile menu. It doesn’t seem to do it on my phone though. Any help with this would be great. Thanks!

    February 9, 2017 at 2:31 pm #744820
    NicomIT

    Hi, just wondering if anyone had a chance to review this. Thanks!

    February 10, 2017 at 3:15 pm #745441
    NicomIT

    Hi, it’s been a couple of days and it would be great if someone could have a look at this.

    February 12, 2017 at 7:17 pm #745998
    NicomIT

    If someone could let me know if this post has at least been seen by support, I would really appreciate it.

    February 13, 2017 at 8:10 am #746189
    Vinay

    Hi,

    We are sorry for the delay, please do not bump your ticket, when you reply to your own ticket it goes to the bottom of the queue.

    I checked your site and they do stack

    View post on imgur.com

    I’m assuming you like the elements to align to the right?

    In that case please use the below css

    @media only screen and (max-width: 767px) {
.responsive #header .sub_menu {
	position: absolute;
    right: 0;
    max-width: 262px;    
}
.responsive #header .social_bookmarks {
	position: absolute;
	right: 0;
    width: 136px;
    }
#advanced_menu_toggle {
    margin-right: 0px!important;
}}

    Best regards,
    Vinay

    February 13, 2017 at 2:52 pm #746416
    NicomIT

    Thanks for the reply Vinay. I wasn’t aware that would bump my request back down.

    The code you provided definitely helped. I made a few other adjustments to try and get things lined up a little more and it’s looking pretty good now. I think I may need to move it to a wider breakpoint, as it looks a little off around 875 pixels wide.

    One thing I still can’t figure out is what is applying the grey border to the social media icons once you get below 875 pixels. If you happen to know what is causing that, I would like to get rid of it. You can see how the icons should look when you view the website at a larger screen size.

    Thanks for the help!

    February 17, 2017 at 1:04 pm #748378
    Vinay

    Hi,

    To remove the border please add the below css

    @media only screen and (max-width: 767px) {
.responsive #top #header_meta .social_bookmarks li, 
.responsive #top #header_meta .social_bookmarks li a {
border:none!important;
	}
.responsive #top #header_meta .social_bookmarks li {
margin-left:2px;
	}
.responsive #header .social_bookmarks {
    width: 160px!important;
    }
}

    Best regards,
    Vinay

    February 17, 2017 at 3:12 pm #748486
    NicomIT

    Thanks Vinay. That worked perfectly.

    February 19, 2017 at 6:20 am #748963
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 21, 2017 at 2:43 pm #749991
    NicomIT

    Everything is good Rikard. You can feel free to close this.

    February 22, 2017 at 7:34 am #750290
    Rikard

    Hi,

    Thanks for the letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Header Area Display on Mobile & Small Screens’ is closed to new replies.