Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #744401

    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!

    #744820

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

    #745441

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

    #745998

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

    #746189

    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

    #746416

    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!

    #748378

    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

    #748486

    Thanks Vinay. That worked perfectly.

    #748963

    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

    #749991

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

    #750290

    Hi,

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

    Best regards,
    Rikard

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