Hamburger menu not visible on smartphoe

baby fish

Im trying out a blogger template. A test blog with the template can be viewed here https://testblog1901.blogspot.ie/

The template works fine on a desktop but when viewed on a smartphone (samsung galaxy) the hamburger menu is positioned off the screen on the right side, if I scroll to the right it is then visible. If I Scroll to the footer, the hamburger jumps into the correct position and will stay in view while scrolling up and down from then on..

Any solution to getting it in the correct position when the page is initially loaded on the smartphone?

Dades

Can't replicate on an iPhone, sorry. Works as it should.

Have you tried using the device screen feature in Chrome's debugger to see how the page acts?
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

It's not a substitute for actual devices but is handy if the bug shows up here as you can try to fix it locally.

baby fish

Thank you for your reply. I suspect the screen is slightly bigger on your iphone and fits everything when the page is loaded. Mine is a Samsung galaxy X cover 3, size of phone body is 132.9 x 70.1 x 10 mm (5.23 x 2.76 x 0.39 in) size of screen is 4.5 inches.

i haven't used the site you suggested, I will look through it later. I usually right click on the piece Im trying to change, click inspect , then find the code I need to change from there. Im sure you probably have guessed already, I'm a self taught novice at this!

I will look at what I believe is called the @media query to see if its set up to suit a phone of my size...If that fails I will try position the hamburger into the middle and under the title...it might atleast bring it into view...css sugestions to do this are welcome!! Now its time for a few hours of trying to fix this:D

S.M.B.

There's something weird happening that is forcing your page to be 460px instead of 360x and certain items which are positioned to stretch from the most left side to the most right side are looking odd.

The hamburger button is just one example but it's not isolated to that. If you look at your TESTBLOG1901 text you can see that it's supposed to be centred but it's actually being cropped.

I'm assuming there's some clash between all the components that are reliant on scroll and it gets resolved somehow when you get to the bottom of the page.

The header should be fixed as you scroll down but it isn't because of some other bit of functionality that's doing something odd.

It might be worth removing anything like this one by one to see where the clash is. My suspicions is that it's the parallax effect but that would not explain why it works perfectly when you scroll to the bottom of the page, scroll to the top then continue to use the site.

baby fish

Ok thanks all, I think fixing this is beyond me,

I moved the hamburger to the left but as you pointed out the heading is still off center as there is extra page to the right off screen that is messing things up.

You get what you pay for and this was free, time to move on

Thanks

Talisman

I haven't taken an in-depth look at the code but my suspicion is that there is a container that is wider than the viewport and this is what causes the menu and header to initially be cropped on the right. Scrolling down and back up invokes some JavaScript which corrects the issue - it's likely the code is setting a style or adjusting the class list of the affected container.

You can use Chrome DevTools to simulate a mobile device and debug the issue on your desktop computer - Simulate Mobile Devices with Device Mode.

baby fish

Managed to fix it by putting:

div {
overflow-x: hidden;
}

after this:

@media (max-width:481px) {
.mobile{width:100%}

So it now looks like this:

@media (max-width:481px) {
.mobile{width:100%}
div {
overflow-x: hidden;

however the section headings e.g. "My services " are missing the top half of the letters now! Might need to adjust the margins on top of sections or something..

Im not really interested in this as a template anymore as when i click on one of the pictures in the MY Work section it justs reloads the whole page with a new image on the top, and the my work content at the bottom. Not very user friendly!

just said Id post what i did to fix the missing hamburger.

bapraster

I checked the link provided by you and for me Hamburger menu looks ok and working well