Creating a sub-menu

by imediazone Banned

Posted: 15 years ago 4 replies

WEB DESIGN

I have the theme Masterclass Magazine on my wordpress blog, but it has a major bug, the subcategories are displayed messy.
My php code for the header navigation is:

Code:

<?php if ( has_nav_menu( 'primary-menu' ) ) {

          wp_nav_menu( array( 'menu_class' => 'sf-menu', 'theme_location' => 'primary-menu' ) );

    } else {
    ?>
        <ul class="sf-menu">
            <?php  = get_option('swt_pages');  ?>
            <li class="page_item <?php if(is_home()): ?>current_page_item<?php endif ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
            <?php wp_list_pages("sort_column=menu_order&depth=1&exclude=;&title_li=");?>
        </ul>
   <?php } ?>
</div><!-- END PAGE MENU -->
</div>

 <div id="blogtitle">
       <h1><a href="<?php echo get_option('home'); ?>/"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('sitename'); ?>" /></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>


 </div>


 <?php get_search_form(); ?>



 <div id="nav2"><!-- CATEGORY MENU -->
     <?php if ( has_nav_menu( 'secondary-menu' ) ) {   //checks if custom menu has been created
          wp_nav_menu( array( 'menu_class' => 'sf-menu', 'theme_location' => 'secondary-menu' ) );
    } else {// if not, old fashioned category menu will be loaded
    ?>
         <ul class="sf-menu">
            <?php  = get_option('swt_categories');  ?>
            <li class="category_item <?php if(is_home()) { echo 'current-cat'; } ?>"><a href="<?php bloginfo('home'); ?>" id="home">Home</a></li>
            <?php wp_list_categories("title_li=&depth=1&exclude=" ); ?>
        </ul>
   <?php } ?>

and my style css looks like this:

Code:

/*
Theme Name: MasterClassMagazine
Theme URI: 
Version: 1.0
Author: sin2384
Author URI: 
Description: Free Wordpress theme by  Please read READ ME.TXT file to find out how to insert pictures in the slider and gallery!
*/
@import url("css/comments.css");
@import url("css/reset.css");
@import url("css/slide.css");
@import url("css/gallery2.css");
@import url("css/featuredcats.css");
* {
  margin: 0;
  padding: 0;
}
/***************LINKS*************************/

a:link, a:visited {
  color: #0082a4;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: underline;
}
/***************END LINKS*************************/

marquee {
margin-top: 0px;
}

marquee a:link {
                text-decoration: none;
                color: #FFF;
                font-size: 20px;
}

marquee a:visited {
                text-decoration: none;
                color: #FFF;
                font-size: 20px;
}

html body {
  background: url(images/bg.jpg) repeat-y center;
  font-size: 12px;
  font-family: Arial, Verdana, Tahoma, Times New Roman;
  line-height: 1.5em;
  color: #1e1e1e;
}

/***************LAYOUT*************************/

#mainwrap {
  margin: 0 auto;
  width: 960px;
}
#headerw {
  width: 966px;
  margin: 0 auto;
  height: 148px;
  background: url(images/header.png) repeat-x;
  margin-bottom: 2px;
}
#header {
  margin: 0 auto;
  width: 960px;
  height: 148px;
}
#blogtitle {
  clear: both;
  text-transform: uppercase;
  float: left;
  height: 75px;
  padding-top: 5px;
  margin-left: -15px;
}
#heading {
  color: #0082a4;
  font-size: 27px;
}
.description {
  color: #98e6fb;
  font-size: 16px;
  margin-top: -20px;
  margin-left: 45px;
}
#header #search {
  float: right;
  width: 299px;
  height: 43px;
  background: url(images/search-bg.png) no-repeat;
  padding: 9px 0px 8px 12px;
  margin-top: 14px;
}


/* -------- START PAGE MENU -------- */

#top {
  width: 960px;
  height: 30px;
}
#top ul {
  float: right;
}
#top li {
  float: left;
  line-height: 30px;
}
#top li a {
  float: left;
  display: block;
  padding: 0 10px;
  font-size: 11px;
  color: #007fa0;
}
#top li.current_page_item a {
  background: #000;
  color: #fff;
}
/* -------- END PAGE MENU -------- */

/* -------- START CATEGORY MENU -------- */

#nav2 {
  clear: both;
  float: left;
  height: 38px;
  width: 960px;
}


#nav2 li {
  float: left;
  line-height: 36px;
  background: url(images/sep.png) no-repeat scroll right;
}
#nav2 li a {
  float: left;
  display: block;
  color: #00252f;
  text-decoration: none;
  font-size: 16px;
  padding: 0px 17px;
}
#nav2 li a:hover {
  background: url(images/nava.png) repeat-x;
}
#nav2 .first {
  background: url(images/sep.png) no-repeat scroll left;
}

/* -------- END CATEGORY MENU -------- */
#bigbanner {
  float: right;
  border: 1px solid #0082a4;
  padding: 0;
  width: 298px;
  height: 248px;
}
.aboutimage {
  float: left;
  border: 1px solid #e2e4e2;
  padding: 2px;
  margin: 2px 5px 0px 0px;
}
#s {
  width:231px;
  padding-left: 5px;
  height: 31px;
  height: 24px\0/;
  padding-top: 7px\0/;
  border: 0;
  margin-bottom: 5px;
  background: url(images/input.jpg) no-repeat scroll top left;
}
*+html #s {
  height: 24px;
  padding-top: 7px;
}
#contentwrap {
  float: left;
  width: 370px;
  margin-right: 20px;
}
#right-column {
  width: 570px;
  float: left;
}

#contentwrapsingle {
  float: left;
  width: 640px;
  margin-right: 20px;
}
#right-columnsingle {
  width: 300px;
  float: right;
}

#mygallery3single {
  width: 300px;
  height:296px;
  background: url(../images/gallery.png) repeat-x;
  margin-bottom: 20px;
}

.sidebar {
  float: left;
  width: 285px;
}
.border {
  background: #f8f8f8;
  border: 1px solid #d4d4d4;
  width: 270px;
  padding:8px 0 0 13px;
}
#sidebar-bottom {
  width: 100%;
  background: #000000;
  overflow: hidden;
}
#sidebar3 {
  margin: 0 auto;
  width: 966px;
  color: #fff;
  padding: 30px 0 30px 0;
  overflow: hidden;
}


/* -------- ADVERT -------- */

.advert{
  margin-bottom: 25px;
  overflow: hidden;
  width: 260px;
}
.advert img{
  padding:2px;
  border:none;
  margin:0;
  float: left;
}

/* -------- END ADVERT -------- */

.custom_images img {
  margin: 0px 1px -10px 0px;
  padding: 0;
}

#footer {
  background-color: #52a3d8;
  width: 960px;
  margin: 0 auto;
  clear: both;
  color: #000000;
  padding: 20px 0 0;
  font-size: 16px;
}
#footer a, #footer a:visited {
  color: #000;
}


/* -------- END WP LAYOUT -------- */

/* -------- START WP STYLES -------- */

.sidebar h3 {
  padding: 10px 0;
  font-size: 24px;
  color: #0082a4;
  border-bottom: 1px solid #e2e4e2;
}
.side-widget {
  clear: both;
  width: 265px;
  margin-bottom: 25px;
}
.border .side-widget {
  width: 255px;
}
.sidebar ul.children {
  margin-top: 5px;
  margin-bottom: -5px;
}
.sidebar ul ul, .sidebar ul ul ul {
  margin-top: 0;
}
.sidebar ul li {
  padding: 6px 0px 6px 14px;
  margin-left: 0px;
  border-bottom: 1px solid #e8e7e7;
  background: url(images/arrow.png) no-repeat scroll 2px 12px;
}
.sidebar li li {
  margin-left: -14px;
  border-bottom: 0;
  border-top: 1px solid #e8e7e7;
}
.sidebar ul li a, .sidebar ul li a:visited {
}
.side-widget a, .side-widget a:visited {
  color: #1e1e1e;
}
.side-widget a:hover {
  color: #1e1e1e;
}
.textwidget {
  padding: 5px;
}
.side-widget div {
  padding: 5px 0;
}
.widget {
  width: 280px;
  float: left;
  margin-right: 40px;
  margin-bottom: 40px;
}
.last {
  margin-right: 0;
}
.clearb {
  clear:both;
}
*+html .clearb {
  margin-bottom: -30px;
}
.widget h3 {
  font-size: 24px;
  color: #fffbff;
  margin-bottom: 30px;
}
.widget a, .widget a:visited {
  color: #fff;
}
.widget h4 {
  font-size: 24px;
}
.widget h4 a, .widget h4 a:visited {
  color: #0082a4;
}
.widget a:hover {
  color: #fff;
}
.widget .swt_posts {
  margin-bottom: 30px;
}
.swt_posts {
  float: left;
  clear: both;
  overflow: hidden;
  width: 100%;
}
.widget li {
  line-height: 30px;
}


/***************POST STYLES*************************/
h2.title {
  margin-bottom: 5px;
  line-height: 28px;
  font-size: 28px;
}
h2.titles {
  margin-bottom: 5px;
  line-height: 32px;
  font-size: 32px;
}
h2.title a, h2.title a:visited, h2.titles a, h2.titles a:visited {
  color: #007492;
}
.meta {
  font-size: 11px;
  margin-bottom: -5px;
}
.meta a, .meta a:visited {
  color: #1e1e1e;
}
a.more-link {
  text-decoration: underline;
}
.postmetadata {
  margin-top: 10px;
}
.post, .page {
  margin-bottom: 0px;
  padding-bottom: 55px;
  background: url(images/postsep.png) no-repeat scroll bottom;
  overflow: hidden;
}
.entry {
  margin-top: 10px;
  line-height: 22px;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
  margin-top: 15px;
}
.entry h2 {
  margin-bottom: 0.4em;
}
.entry p {
  margin-top: 10px;
}
.entry img, .post_thumbnail {
  padding: 0px;
  border: 1px solid #cdcccc;
  background: #fff;
}
.entry th {
  padding: 0;
  margin-right: 2px;
}
.entry li {
  margin-left: 20px;
  list-style: circle;
}
.entry ol li {
  list-style: decimal;
}
blockquote {
  border-left: 10px solid #007492;
  margin-left: 20px;
}
blockquote p {
  padding: 10px;
}
.alignleft {
  float: left;
  margin: 0px 0px 0px 0px;
}

.alignright {
  float: right;
  margin: 0px 0px 0px 0px;
}

img.aligncenter {
  display: block;
  margin: 0 auto 5px;
}
/***************END POST STYLES*************************/
#calendar_wrap {
  text-align: center;
}
caption {
  background: #0082A4;
  color: #fff;
  width: 100%;
}
#wp-calendar th {
  padding: 14px;
}
#wp-calendar td a:link {
  background: #0082A4;
  color: #fff;
  padding: 1px 6px;
  line-height: 29px;
}
li.pagenav, li.categories, li.linkcat {
  list-style:none;
}
h2.pagetitle {
  margin: 0 0 20px;
  font-size: 28px;
  text-align: center;
}
p.center {
  margin: 10px 0;
}
/* -------- END WP STYLES -------- */



/* -------- TABLES -------- */
#contentwrap table{font-size:1.2em;margin:5px 0 25px 1px;}
#contentwrap table td{padding:8px;border: 1px solid #ccc;}
/* -------- END TABLES -------- */


/* -------- PAGE NAVIGATION -------- */

.wp-pagenavi{
  clear:both;
  margin:0px 0 20px;
  text-align:center;
  font-size: 15px;
}
.wp-pagenavi span.pages,.wp-pagenavi span.extend{
  background:#fffdfa;
  border:1px solid #d1d0d0;
  color:#0082a4;
  margin:2px;
  padding:3px 7px 7px;
}
.wp-pagenavi a,.wp-pagenavi a:link,.wp-pagenavi a:visited{
  background:#fffdfa;
  border:1px solid #d1d0d0;
  color:#0082a4;
  margin:2px;
  padding:3px 7px 7px;
  text-decoration:none;}
.wp-pagenavi span.current,.wp-pagenavi a:hover{
  background:#0082a4;
  border:1px solid #d1d0d0;
  color:#fff;
  margin:2px;
  padding:0px 7px 7px;
}
/* -------- END PAGE NAVIGATION -------- */

/* -------- SUBSCRIPTION -------- */
ul#topsoc {
  margin-top: -5px;
}
ul#topsoc li {
  line-height: 62px !important;
}
ul#topsoc li a {
  padding: 32px 32px 32px 43px !important;
  margin: 0;
}
a#twitter {
  background: none;
  background: url(images/twitter.png) no-repeat scroll 0px 24px !important;
}
a#socrss {
  background: none;
  background:url(images/rss.png) no-repeat scroll 0px 24px !important;
  position: relative;
  top: 2px;
}
a#email {
  background: none;
  background: url(images/email.png) no-repeat scroll 0px 24px !important;
}
a#fb {
  background: none;
  background: url(images/facebook.png) no-repeat scroll 0px 24px !important;
}
/* -------- END SUBSCRIPTION -------- */
.flickr_badge_image { float: left; }
.flickr_badge_image img { width: 80px; height: 67px; padding: 3px; margin: 0 5px 10px 0; border: 1px solid #2d2c2c;   float: left; }

For the moment i have removed the subcategories from the menu that i configured. I can tell you that they were displayed exactly in the marquee
Can anyone please help me fix this?
The site is the one called daily newspaper from my signature.

#creating #submenu

aaron_nimocks 15 years ago

Would be easier if you add 1 or 2 sub categories so people can see how it is behaving in order to fix it.
- Thanks
- 1 reply
Signature

My free PSD logs can be downloaded at PSD Bum. Enjoy!
{{ DiscussionBoard.errors[3151878].message }}
- imediazone Banned 15 years ago
  
  Originally Posted by aaron_nimocks
  
  Would be easier if you add 1 or 2 sub categories so people can see how it is behaving in order to fix it.
  
  I have added the 2 categories from the menus option. As you can see they are displayed exactly in the marquee.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[3151890].message }}
  
  imediazone Banned 15 years ago
  
  Does anyone know, i have posted this topic in 3 different known forums, and i am waiting for 2-3 days. If someone manages to fix this problem, i will thank him and also give him a sitemap generator script.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[3155291].message }}
  
  whiteshadow1890 Banned 15 years ago
  
  put this is you style.css
  
  Code:
  
  #nav2 li ul { background: #000; margin-left:-999em;/* hide initially off screen */ height:0; overflow:hidden; } #nav2 li:hover ul { margin-left:0; height:auto; overflow:visible; }
  
  [ 1 ] Thanks
  
  {{ DiscussionBoard.errors[3169365].message }}

Creating a sub-menu

Trending Topics

Back after 20 years -- anyone still here from the early days?

Shopify dropshipping

Best technique to market limo services

Who is still here that knows me?

Build It Right: The Blueprint for a Winning Digital Marketing Strategy