Responsive Menu


#1

Hi all.

I'm still relatively new to responsive designs ( I am learning, slowly ) so a little bit of advice here would be appreciated.

Here is the page I am working on:

http://lycos.cbresources.uk

As you will see - it's not very "mobile friendly" - I realise there are a lot of changes that need to be made. The one I'm focusing on at the moment is the removal of both sidebars and the creation of a "slide out menu" when viewing the site on a display that's lower in width.

My first problem is that when I'm using the Chrome Developer tool to view the site in a responsive manner, the hamburger menu is "shrinking" the main content rather than pushing it to the right - Is this normal? Or is there something in the responsive CSS code that is causing this to happen?

Also - When I look at the site on my iPhone 7, the left slide out menu seems rather small - I set it to 250px in width because I want the advert to fit in there but it seems like it's scaling it down.

Also - When I'm on my iPhone and I deselect the menu, the page doesn't go back to the top - the menu goes back and the page is slightly lower than when it started and if I scroll up, I see the menu hiding there behind the rest of the content. I also cannot scroll up and down the menu if I rotate the phone.

Lastly, when I go through the various screen sizes that chrome offers in it's developer console and select the hamburger menu the slide out section comes up at the bottom also (below the site content) - I believe this could be linked to my first issue with the site "shrinking" instead of shifting but I can't be sure.

I realise this could be a lot to ask but I'm hoping for somebody more experienced with responsive designs it'll be a quick one to answer. Here's the responsive CSS in case you can see the answer in there - If you need me to post code snippets from anything else on the page please let me know.

@media (max-width: 1023px) {
	
	body {
		padding: 0 !important;
	}

	div.left-column,
	div.right-column {
		display: none;
	}
	
		
	li.shipmail-view,
	li.logbook-view,
	li.album-view,
	li.rank-view,
	li.shipmail-create,
	li.logbook-create,
	li.rank-barometer,
	li.album-upload
	 {
		display: block !important;
		padding: 0 !important;
		width: 100% !important;
		float: left !important;
		text-align: left !important;
	}

	div.grid-shipmail,
	div.grid-logbook {
		margin-bottom: 35px !important;
	
}

/* LEFT MENU */

li.left-menu-section {
	padding-top: 20px;
}

.navigation {
    list-style: none;
    background: #022734;
    width: 98%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
	-webkit-margin-before: 0;
}

ul.left-menu a.left-menu-item,
ul.other-links li a,
ul.chatshop li a {
	color: #fff !important;
}

div.chatshop-title,
div.other-links-title { 
	padding-left: 5px !important;
	font-size: 20px !important;
	padding-top: 0 !important;
	color: #fff !important;
}

ul.chatshop,
ul.other-links {
	padding-left: 40px !important;
}

.site-wrap {
    min-width: 100%;
    min-height: 100%;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
	width: 30px;
    height: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
    background-size: contain;
}

.nav-trigger:checked + label {
    left: 275px;
}

.nav-trigger:checked ~ .site-wrap {
    left: 260px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

.nav-trigger + label, .site-wrap {
    transition: left 0.2s;
}

.ad-space-sidebar {
	padding-left: 4px;
}


body {
    overflow-x: hidden;
}

}

@media (min-width: 1024px) {

.navigation {
	display: none;
	
	
}

input#nav-trigger {
	opacity: 0;
}

}

#2

you didn't even start the code with <!DOCTYPE html>
you have a several code errors, validate the code https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Flycos.cbresources.uk%2F


#3

You don;t have the viewport meta tag in place which means that devices will assume your page is 980px wide (approx) and simply scale it smaller until it fits their smaller viewports resulting in text and elements that are impossibly small.

Add the viewport meta tag and then it will be up to you to make sure the content actually fits by using sensible media queries.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note that if you have content that creates a horizontal scrollbar on the viewport then that will break the mobile view so you need to ensure that at every step you have controlled any overflow (and generally that doesn't mean just hiding it unless that was required for the design).

You have used fixed positoining for your sidebar and any content that goes outside the viewport is unreachable by scrollbars on the viewport. You would need to add scrollbars to the .navigation itself (overflow:auto).


#4

Hi Paul,

Thanks for your help, as always.

Do you know why the "off screen" menu is appearing at the bottom of the page when I'm looking at it on a page that isn't as tall as the menu.... For example:

http://lycos.cbresources.uk/shipmail.php

You can see the off screen menu peeking out at the bottom of the page...


#5

Hi, chru5h.

Where is the menu in your code? It's always helpful to guide us to the code, if possible.

You might want to give your code another examination in the HTML validator. The comment marks should have two (2) dashes (hyphens), not three (3). There are no <html> tags. The open html tag would be where the language is declared. There are several unmatched <div> tags.

If you have the inclination, you could improve the indentation of the HTML, too. At this time, it's easy to see how the <div> and <li> tags might have ended up in the wrong places.

Paul will be back next week, if you want to wait.


#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.