Another issue I’m seeing is the menu.html page on a mobile it doesnt display property the prizes probably cause the percent is so small how can I resolve this issue?
You should be using media queries to deliver a simpler menu for mobiles. Change it to a one column layout instead of two for mobile and that will give more room for the prices. You can set larger font-sizes also if needed but you will need to set the viewport meta tag accordingly so that mobile doesn’t scale.
Hi Paul,
Things seem to be coming together, still having a few issues with the ballon and other images. When the browser is wide the images show up in the middle of the browser so it conflicts with the text alot, how can I make them be flush to the right?
I don’t have much knowledge in media queries just a bit how would I tackle this to hide the images on a mobile and make the menu just one column.
Thanks,
Mike
I’ve moved the site as well to different server and begin implementing Wordpress now I have a little bit of an annoying vertical scroll, how can I get rid of this? Then need to fix the images so they flush right on wider monitors as well.
Then if I can get some help with media queries for the menu and how to remove the images think everything will be almost there. I’m going to begin implementing the navigation too, may need some help there to get it looking how does on the PDF.
I’ve got the navigation in there think I need it to stick out first instead of being hidden with the little menu thing on the bottom to click to hide it. I still need to do the links but just want to get the functioning of it correct first, but so far looking good.
But on some of the pages with the navigation when it slides back in it leaves a bunch of black lines, well in Chrome it does for the location and catering page.
Heres is new links I don’t have menu page up on here yet still have to prep that for Wordpress…
http://modocom.ca/scribbles/
http://modocom.ca/scribbles/catering
http://modocom.ca/scribbles/location
Thanks,
Mike
I’ve been making some good progress with the navigation I believe. But I think I did my list in it incorreclty I tried to display: block and only the word would still be a live link not the whole li so I had to put the anchor infront of the li which I know is incorrect but how can I solve that issue. Then I’d like these to be squares so when you resize the browse the li resize with itand the background image of like the house, coffee cup etc but not sure how to make that resize and need to move my text down below the background image and of course be white which I know how to make it white. Then just the menu thing to hide and show the menu. Solve those picture problems to move to the right and then tackle the mobile last.
*EDIT - I fixed the images so they are flush right now.
So just the navigation and then got to do that menu page as well and mobile stuff, woot woot I see an end in sight.
Thanks,
Mike
You need to put the anchors back inside the list items and instead of styling the list element you style the anchor instead.
.navbar li a {
display: block;
font-size: 12px;
font-weight: 700;
line-height: 80px;
margin: 0;
min-height: 100px;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
So just the navigation and then got to do that menu page as well and mobile stuff, woot woot I see an end in sight.
The mobile techniques you need are provided in the link I gave above.
Basically you either make the default styling of the page suitable for mobile only and then use media queries to enhance the display for wider viewports (the preferred method), or you just add media queries now for the smaller devices (easier option as you have already styled for the desktop).
A media query (or queries -that are targettedt at specific screen widths) is placed after the rules that it needs to modify and then changes the property/values of elements to make a different display. e.g. where you have two floated columns you would set them to float:none so that they line up under each other and maybe change their width to be 100% wide rather than a fixed or percentage width.
You can also do things like setting images to display:none, removed fixed positioning and simplify navigation. It may be that you have to change things around to allow this to happen or add some extra elements into the mix to allow it all to happen. It’s not a simple fix but something that you must build into the logic.
But on some of the pages with the navigation when it slides back in it leaves a bunch of black lines, well in Chrome it does for the location and catering page.
I didn’t notice any black lines in Chrome so you may have fixed this but I have seen that happen on sites before and the fix was to add the folowing to the rule:
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
Thanks Paul,
Works perfect, I’m going to worry about mobile right when I get desktop version complete which is almost there.
Just need bit of help with the navigation the li can make it square no matter what size the width is right now on a wider screen since I set the min-height: to 100px its wider due to the fact I was just testing and would like the background image to scale for the li when resizing if possible and right now the text is on top of the image would like to push it down bit more.
Then just the Menu hide and show button on the bottom if thats possible to make it an anchor rather then a rollover.
Thanks your a genius!
Hi,
I would have kept the left nav a fixed pixel width as it is quite small already.
However you should be able to do something like this to keep it square.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
margin:0;
padding:0;
list-style:none
}
.navbar {
position:fixed;
top:0;
left:-6.5%;
width:8%;
height: 100%;
background: #333;
z-index:99999;
}
.navbar h4 {
position:absolute;
right:-52px;
top:0;
z-index:2;
width:10px;
padding:20px;
font-size:24px;
margin:0;
background:#0c3338;
color:#fff;
text-transform:uppercase;
}
.navbar, .navbar ul {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: al 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.navbar:hover {
width:8%;
left:0;
}
.navbar li {
margin: 0;
padding: 0;
}
.navbar li a {
display: block;
font-size: 12px;
font-weight: 700;
line-height:normal;
margin: 0;
min-height:0;
padding: 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
width: 100%;
}
.icon {
background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/scribble.png') top center no-repeat;
background-size:cover;
display: block;
font-size: 12px;
font-weight: 700;
line-height:normal;
margin: 0;
min-height: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.home { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/home.png') top center #ffd204 no-repeat; }
.menu { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/menu.png') top center #71cef5 no-repeat; }
.catering { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/catering.png') top center #ce4553 no-repeat; }
.location { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/location.png') top center #735da8 no-repeat; }
/* extra over-riding rules */
.navbar { display:table; }
.navbar li {
background-size:cover;
display:table;
line-height:normal;
width:100%;
}
.navbar li a {
line-height:normal;
position:relative;
min-width:62px;
}
.navbar li a:after {
content:" ";
margin-top:100%;
display:block;
height:0;
line-height:0;
}
.navbar li span {
position:absolute;
bottom:5px;
left:0;
right:0;
text-align:center;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li class="icon"><a href="#"></a></li>
<li class="home"><a href="http://modocom.ca/scribbles"><span>Home</span></a></li>
<li class="menu"><a href="http://modocom.ca/scribbles/menu"><span>Menu</span></a></li>
<li class="catering"><a href="http://modocom.ca/scribbles/catering"><span>Catering</span></a></li>
<li class="location"><a href="http://modocom.ca/scribbles/location"><span>Location</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Then just the Menu hide and show button on the bottom if thats possible to make it an anchor rather then a rollover.
You’ll need JS to do the show and hide unless you only want to support modern browsers then you could place a checkbox at the bottom and use its :checked state to change the display of its siblings.
I’m not sure what you are doing with the toggle anyway as you are already showing and hiding on hover.
Perfect, its looking better now!!!
Only thing I noticed now is that just the word is clickable not the whole block in the navigation how can I fix that?
We decided to keep it on hover now. Up at the top the first grey block how can I have a word menu on it going diagonally up so people know its menu. Don’t want it hanging out further than the menu right now so just on that grey spot. I suppose I could include it in the picture but ideally wouldnt like to do that.
Thanks
Like this:
.navbar li a{overflow:hidden}
Up at the top the first grey block how can I have a word menu on it going diagonally up so people know its menu. Don’t want it hanging out further than the menu right now so just on that grey spot. I suppose I could include it in the picture but ideally wouldnt like to do that.
You can rotate text like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
position:absolute;
top:10px;
left:10px
}
</style>
</head>
<body>
<div class="test">Menu</div>
</body>
</html>
Thanks for that, very useful to know how to rotate text, now just gotta figure out how to put it on the right hind side of the top li.
I figured out the media queries easily looks good on mobile now from what I can tell.
Almost complete now, just figure out this rotating menu text and think itll be ready YAY!!!