Hi Ariane,
It seems to be working for me (the RSM). Or do you mean the regular menu is no longer working? What does the code in the header.php look like?
Chris
Hi Chris,
The page looks fine on small screens, RSM is visible but on big screens the regular menu is not working anymore and just al list of the menu-items appears.
code header.php:
<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
full code header.php:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/stylesheets/base.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/stylesheets/skeleton.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/stylesheets/layout.css" media="screen" />
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_url'); ?>/resources/jquery/jquery-ui-1.8.23.custom.css">
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_url'); ?>/resources/jquery/jquery.fancybox.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/resources/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/resources/jquery/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/resources/jquery/i18n/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/resources/jquery/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/resources/hoteliers.js"></script>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<script type="text/javascript">
$(document).ready(function() {
$('#hoteliers_form').hc_calendar();
// when button is clicked, submit the form
$('#hc_submit').bind('click', function() {
$('#hoteliers_form').submit();
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<div class="sixteen columns header">
<div class="ten columns layer"></div>
<div id="topfoto" class="ten columns">
<img src="<?php bloginfo('template_url'); ?>/images/hd-rechthuis.jpg" alt="Hotel het Rechthuis" width="566" height="323" border="0">
</div>
<div id="logo" class="six columns">
<img src="<?php bloginfo('template_url'); ?>/images/hotel-het-rechthuis.jpg" alt="Hotel het Rechthuis" border="0">
</div>
<div id="topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
</div><!-- eind topmenu -->
</div><!-- eind header -->
<div class="sixteen columns"><!-- menu -->
<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
</div><!-- eind menu -->
Is this a custom theme?
Looks like you’ve written all your styles based on this ID
#menu-main-menu
This ID is auto-generated by WordPress based on the assigned menu.
Looks like you’ve assigned a different menu on the RSM page – it has the ID #menu-main-menu-1, so your styles don’t apply.
A better strategy would be to pass an ID or class to the wp_nav_menu() function to use as your container class/ID, therefore ensuring the class/ID exists and your styles apply.
Hope that helps,
Chris
Hi Chris,
Yes, it’s custom.
I didn’t assign a different menu on that page, I just only activated RSM on that page through Advanced Settings. I turns out RSM changes the auto-generated ID #menu-main-menu to #menu-main-menu1 and therefore it couldn’t find it’s CSS.
I gave the menu functions an extra class and used it in the CSS. It works fine now.
Thanks for helping to find the solution!
Cheers, Ariane
Glad you found a solution 🙂
