Ask your WordPress questions! Pay money and get answers fast! (more info)

Make menu responsive WordPress

  • SOLVED

Ready for the second round?

Make the menu responsive on a mobile phone.




Answers (4)

2013-05-11

Daniel Yoen answers:

here this :

@media only screen and (max-width: 768px) {
#pbk-mega-menu{text-align:center!important;}
#pbk-mega-menu li{float:none!important;width: 100%;}
#pbk-mega-menu > li:hover > a {background: #37A5B5 !important;color: #FFF;}

li.current_menu_item a {background: #37A5B5 !important;color: #000;}
}


hope this help :-)


Creativira comments:

That worked, Daniel. Thank you.

2013-05-11

Sarbartha Das answers:

I will do it..


Creativira comments:

Cool. Thank you.


Creativira comments:

It should look like a vertical menu with each menu center-aligned.


Sarbartha Das comments:

You have to change the css a bit. and require a jquery file.

Menu structure should be this:

<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', '' ); ?></h3>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav><!-- #site-navigation -->


Uploaded two files menu-css.css and navigation.js
you have to attach it on header.

Don't touch your main css files.


Sarbartha Das comments:

Can't upload..

Here is the menu-css.css .....


.menu-toggle {
padding: 6px 10px;
padding: 0.428571429rem 0.714285714rem;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 1.428571429;
font-weight: normal;
color: #7c7c7c;
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
cursor: pointer;
}

.menu-toggle:hover {
color: #5e5e5e;
background-color: #ebebeb;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

.menu-toggle:active,
.menu-toggle.toggled-on {
color: #757575;
background-color: #e1e1e1;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: linear-gradient(top, #ebebeb, #e1e1e1);
box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
border: none;
}

/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
background-color: #2A1912;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}


@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
.menu-toggle {
display: none;
}

}


Sarbartha Das comments:

Here is the navigation.js


/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var nav = document.getElementById( 'site-navigation' ), button, menu;
if ( ! nav )
return;
button = nav.getElementsByTagName( 'h3' )[0];
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button )
return;

// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}

button.onclick = function() {
if ( -1 == menu.className.indexOf( 'nav-menu' ) )
menu.className = 'nav-menu';

if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
}
};
} )();


Sarbartha Das comments:

Attach them in header..


Sarbartha Das comments:

If any problem let me know!


Creativira comments:

Hello,
Thank you for your responses. I am not able to add these codes until I get back this evening.


Creativira comments:

I am going to apply your code now.. not as simple as adding something below
@media only screen and (min-width: 768px) {
/* Desktop styles go here */
}


I suppose..


Creativira comments:

@Sabartha

Question: I've added the css to my custom.css
Appending the .js is not clear to me. Please provide more details.
Thank you.

2013-05-11

DHRUBA BHOWMIK answers:

Try it....................

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Responsive Header Nav</title>

<meta name="description" content="Responsive Header Nav">

<meta name="author" content="Treehouse">

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

<link rel="stylesheet" href="css/styles.css">

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>

<body>

<header>

<a href="#" id="logo"></a>

<nav>

<a href="#" id="menu-icon"></a>

<ul>

<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<section>

<img src="img/featured.png" alt="Respond" />

<h1>Respond to Your Surroundings</h1>

<p>...Filler Text</p>

<p>...Filler Text</p>

<p>Filler Text</p>

</section>

</body>

</html>

I am sure it's help you.


DHRUBA BHOWMIK comments:

For the CSS.........................

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body {
font-size: 1.05em;
line-height: 1.25em;
font-family: Helvetica Neue, Helvetica, Arial;
background: #f9f9f9;
color: #555;
}

a {

color: #4C9CF1;
text-decoration: none;
font-weight: bold;

}

a:hover {

color: #444;

}

img {

width: 100%;

}

header {

background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;

}

#logo{

margin: 20px;
float: left;
width: 200px;
height: 40px;
background: url(../img/logo.png) no-repeat center;
display: block;

}

nav {

float: right;
padding: 20px;

}

#menu-icon {

display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(../img/menu-icon.png) center;

}

a:hover#menu-icon {

background-color: #444;
border-radius: 4px 4px 0 0;

}

ul {

list-style: none;

}

li {

display: inline-block;
float: left;
padding: 10px

}

.current {

color: #2262AD;

}

section {

margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px

}

h1 {

font-size: 2em;
color: #2262AD;
line-height: 1.15em;
margin: 20px 0 ;

}

p {

line-height: 1.45em;
margin-bottom: 20px;

}


try it.....
Another .


If any problem let me know


DHRUBA BHOWMIK comments:

Now it’s time for the Media Queries

/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {

header {

position: absolute;

}

#menu-icon {

display:inline-block;

}

nav ul, nav:active ul {

display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;

}

nav li {

text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;

}

nav:hover ul {

display: block;

}

I post 3 here.

I hope your problem solve if you follow my 3 post.


Thanks

2013-05-11

MDan answers:

Hello,

For full compatibility with a wide range of mobile devices i strongly recommend using this responsive nav which you can see in action here:
http://responsive-nav.com/
Just minimize the browser window to a small scale.

Another awesome plugin:
http://www.meanthemes.com/plugins/meanmenu/



Creativira comments:

Thanks @Daniel Mesteru. Will check them out.

Cheers.