Responsive Issues With My Site

[KKHAN]

Hi Guys,

I am creating my own website, I’ve never been too good with responsive design i am still in the process of learning!

Can you take a look at my site for me and help me fix some minor problems, atm im at a loss as to where im going wrong.

kkhan.me

1. If you use Google Chrome, and you resize the browser all the way down you will notice that my menu changes, but when i click on the menu bars, it does open the menu, but the menu icon disappears. I’m not sure why this is and the issue is only present in google chrome and not firefox.

2. When i also resize it down to the mobile view, the smooth scroll linking does not work properly, if you click services it goes to the home(banner) section , if you click skills it goes to mid way down to the services section.

[KKHAN]

IVe been doing some more tests

1

For the first issue the problem i noticed occurs because of the .site-header having a fixed position, if u remove the fixed position it works with the transition left in. However, i want a fixed header :/ and the method alrdy works in firefox So still not found the solution.

FYI If i remove the transition like you said, it still occurs for me. Im so confused right now why it works in firefox and EVEN IE! as is BUT not in chrome.

I think ive fixed it by removing top:0 from .site-header. Then Just removing the margin-top from .site-banner. I’m not sure if that would cause an issue later down the line? AS when ever ive seen a fixed header done its always been position:fixed WITH top:0

2

For the second one the issue was with the smooth-scroll js library i was working with, if you have a fixed header you need to add data-scroll-header to the nav. As my nav was being pushed to the left it was getting confused so in the mobile view by adding it to the header {} aswell it seems to have fixed the issue.

[KKHAN]

Just to tag onto this thread, as i don’t see the point in creating a new one.

When you you look at this on a mobile phone and you open the menu how do you get the effect where if you swipe left it opens the menu and swipe right it closes it? Which i hope will stop the user from being able to scroll horizontally on a mobile phone as it doesen’t look professional.

[Author]

Posts