I’m in the midst of adding elements to my coding so that it’s mobile responsive. On my website, when you view it on desktop or laptop, my navigation menu is off to the left side-vertical. I’ve tried every trick I can to get it to look correct in a mobile browser but so far no luck. Could someone point me or give me a working example of how to do this so that the navigation menu can be kept in mobile devices without it looking weird? The two test pages are here- www.mikesextonstudio.com/mobiletest.html & www.mikesextonstudio.com/storestest.html
It might help if you provide a link to the site or the code to recreate the issue.
Many websites just opt to create hamburger menus instead to make it easy for users.
Ja, I’m sorry; here’s the link for the website- www.mikesextonstudio.com and here’s the CSS coding:
p {text-indent : 2%; text-align : justify; margin-right: 1%;
}
P.note { padding-left : 7em; font-family : Georgia, "Times New Roman", Times, serif;
}
#header { float: center; width: 85%; margin: .2%; padding: 0em; display: inline;}
#content2 { float: left; width: 95%; margin: 1%; padding: 0em; }
#footer { float : center; width: 100%; }
body { padding-left : .5em; font-family : Georgia, "Times New Roman",
Times, serif; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015BGImage_zpsgg7eotdf.jpg);
background-color : #F5F6F8; margin: 0px;
}
table { border : 0px; border-collapse: collapse; border-spacing : .6em; }
td {padding : .1em}
h1 {font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color : #21a8f9; text-align : center; font-size : 1.5em;}
h2 {font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color : #0000c0; text-align : left; font-size : 1.3em;}
P.image {float: center; text-align: center; color: #000000;
}
/* =Nav
-------------------------------------------------------------- */
ul.menulink { list-style-type : none;
padding : 0em;
margin-left : 0.5%;
margin-right: 0 em;
margin-top : 0 em;
margin-bottom: 0 em;
position : absolute; top : 0.5em; left : 0em; width : 5em; text-align: center;
}
A.menulink {
display: block;
margin : 0 em;
width: 108px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-weight: bold;
font-size:12px;
border-style : solid;
border-width : 3px;
border-color : #f5df21;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuRegBG_zps01a193dd.jpg);
}
A.menulink:visited {
border: inset 3px #EEE21C;
color : #9c18f6;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuRegBG_zps01a193dd.jpg);
font-weight: bold;
font-style: italic;
}
ul.navbar a {
text-decoration : none;}
A.menulink:hover {
border: solid 3px #42b1f4;
font-size: 12px;
font-weight: bold;
color : #c00000; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015MenuHover_zpszqmawcx7.jpg);
}
div.left
{
float:left;
width:20%;
padding:.5em;
border:6px inset #21a8f9 ;
background-image: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015BoxesBG_zpsfqdefms0.jpg) ;
margin:1em;
font-size: 12px;
text-align: left;
}
div.right
{
float:right;
width: 20%;
padding: .2em;
border:6px inset #21a8f9 ;
background-image: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015BoxesBG_zpsfqdefms0.jpg) ;
margin:1em;
font-size: 12px;
text-align: left ;
}
a:link {color : #1c82fa ;}
a:visited {color : #800080; text-decoration : none;}
a:hover {color : #c00000; text-decoration: none; }
a:active {color : #c00000;}
p.CPSoccer
a {
display: block;
margin: auto;
width: 158px;
height: 48px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/CPSoccerButton1_zps372f8642.jpg);
background-repeat: no-repeat;
}
p.CPSoccer a:hover, p.CPSoccer a:active{
border: solid 0px #3366FF;
font-size: 110%;
width: 158px;
height: 48px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/CPSoccerButton2_zps4bf8b6ed.jpg);
}
p.ZazzleSoccer
a {
display: block;
margin: auto;
width: 158px;
height: 48px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/ZazzleSoccer1_zpsd009d0e1.jpg);
background-repeat: no-repeat;
}
p.ZazzleSoccer a:hover, p.ZazzleSoccer a:active{
border: solid 0px #3366FF;
font-size: 110%;
width: 158px;
height: 48px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/ZazzleSoccer2_zpsa1cd0772.jpg);
}
address {
border-top-style: groove ;
font-size: 12px;
float: center;
padding: .3em;
width: 100%;
border-top-width: thick ;
border-top-color : #800000;}
div.L2
{ float: left;
width: 3%;
padding: .3em;
margin-right: 2%;
}
div.L3
{ float: left;
width: 3%;
padding: 0em;
margin-right: 0em;
}
p.Facebook
a {
display: block;
width: 48px;
height: 48px;
repeat: no-repeat;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_facebook_button_blue_zpsygdzfjwt.png);
}
p.Facebook a:hover, p.Facebook a:active
{
border: 0;
font-size: 105%;
width: 48px;
height: 48px;
margin: auto;
repeat: no-repeat;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_facebook_button_red_zpsikvcp4a9.png);
}
p.Twitter
a {
display: block;
margin: auto;
width: 48px;
height: 48px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_twitter_button_blue_zpsttuidjkq.png);
background-repeat: no-repeat;
}
p.Twitter a:hover, p.Twitter a:active{
border: solid 0px ;
width: 48px;
height: 48px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_twitter_button_red_zpsbhafvij1.png);
}
p.googleplus
a {
display: block;
margin: auto;
width: 48px;
height: 48px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_google_button_blue_zps2mui6ukt.png);
background-repeat: no-repeat;
}
p.googleplus a:hover, p.googleplus a:active{
border: solid 0px ;
width: 48px;
height: 48px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/social_google_button_red_zpsqyge8iqi.png);
}
#table2 { border : 10px inset #c00000; border-spacing : 8px; width: 60%; margin: auto ; border-collapse: collapse; background-image: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015SocialMediaCenterBg_zpsycfwj4zv.jpg); }
#table2 th { border-spacing : 8px; margin: auto ; background-color: #ffef3f; padding-top: 5px; }
#foot_nav {
list-style: none; /* this removes the bullets */
margin: 0; padding: 0;
width: 100%
}
#foot_nav li{
display: inline;
float: left
width: 12%;
text-align: center;
}
#foot_nav li
a:link {
margin : 0.5em;
width: 120px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size: 10px;
padding: 0px 2px;
border-style : solid;
border-width : 2px;
border-color : #c00000;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuRegBG_zps01a193dd.jpg);
}
#foot_nav li
a:visited {
border: solid 3px #EEE21C;
color : #9c18f6; background-image: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuBgVisited_zps0e39b1b0.jpg);
}
#foot_nav li
a:hover {
border: solid 2px #42b1f4;
font-weight: bold;
font-size: 10px;
color : #ffffff; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuBgVisited_zps0e39b1b0.jpg);
}
a.foot_nav,
a.menu-anchor {
display: none;
}
@media (max-width: 480px) {
.left {
margin: 10px auto;
float: none;
display: none;
}
.right {
margin: 10px auto;
float: none;
display: none;
}
.menulink { display: none;
}
}
@media (max-width: 801px) {
p.CPSoccer
a {
display: block;
margin: auto;
width: 120px;
height: 37px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/Mobile/CPSoccer_zps9igziqi0.jpg);
background-repeat: no-repeat;
}
p.CPSoccer a:hover, p.CPSoccer a:active{
border: solid 0px #3366FF;
font-size: 110%;
width: 120px;
height: 37px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/Mobile/CPSoccerHover_zpsoxkgj4ix.jpg);
}
p.ZazzleSoccer
a {
display: block;
margin: auto;
width: 120px;
height: 37px;
text-align: center;
text-decoration: none;
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px;
border-style : solid;
border-width : 0px;
border-color : #E8D44C;
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/Mobile/ZazzleSoccer2_zpsw8mvljje.jpg);
background-repeat: no-repeat;
}
p.ZazzleSoccer a:hover, p.ZazzleSoccer a:active{
border: solid 0px #3366FF;
font-size: 110%;
width: 120px;
height: 37px;
margin: auto;
color : #991720; background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/Mobile/ZazzleSoccerHover_zpsb70u7pha.jpg);
}
}
Ok sorry, don’t quite understand what a hamburger menu is.
Reduce your browser windows width until it activates mobile.
That’s not the best hamburger ever but it illustrates it. I would post my own websites hamburger since I believe it accounts for everything (JS off, good functionality) but I don’t want to get blasted by the mods.
Click my avatar, go to my profile page, and near the top you’ll see a website in the top box. Click that. Check it out in mobile with and without JS.
2 Likes
Much appreciated for the help Ryan; my menu’s a vertical one though; is there a way to make it responsive-friendly?
That’s fine. It shouldn’t matter. As said before, just use hamburger. Get an attempt worked up and we will go from there.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.