Made my own menu with CSS – where to implement it in WP ?

  • So, after I thought a plugin running on javascript for a menu that somewhat met my wishes was making my site slow, I became dedicated to make my own menu in CSS. The CSS itself is not a real problem, what I haven’t found out is where to enter my css code so that it works for my single left sidebar (I added this menu to the left sidebar through the page ‘widgets’). I’m using the swift theme, should that matter.

    If anyone could help on this it would be greatly appreciated!
    I tried using this code in style.css since I want my menu to be dynamic (if I add a new page, a new button should be added to menu automatically)

    <ul id="menu">
<li <?php if(is_home()) { ?> class="current_page_item"< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">home</a></li>
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

    but maybe I misunderstood it, since nothing happened.

    this is my CSS, if it is of any use.

    <ul id="menu">
<li <?php if(is_home()) { ?> class="current_page_item"< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">home</a></li>
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

#primary-menu{ border-top: 1px solid #013d6c; border-right: 1px solid #013d6c; border-left: 1px solid #3D59b5;}

#primary-menu ul li {margin: 0; padding: 0; border: none;}

#primary-menu ul a {padding: 10px 10px 10px 15px; background: #3D59b5; text-decoration:none; display: block; color: #a0a0ff; border-bottom: 1px solid #7Da9e5; border-top: 1px solid #4695d3; font-family: Verdana, Helvetica , sans-serif ;}

#primary-menu ul ul a {padding: 10px 10px 10px 25px;}

#primary-menu ul a:hover {padding: 10px 10px 10px 15px;
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);}
}

#primary-menu ul {
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);}

</ul>

Viewing 4 replies - 1 through 4 (of 4 total)

  • insert the css code in your theme css and also you need to edit your theme files usually on header.php to insert your PHP Code

    Check your header file to find out which css is used and add to it OR
    save your css in a separate file and add it the the header.php file

    Thread Starter Aquinox

    (@aquinox)

    Thanks,

    I’m a bit confused though as there are multiple css files ; the custom-style.css , and style.css. I think I also need to do something with the file ‘sidebar-single-left.php’

    Anyways what I did:

    added this code at the end of style.css

    #menu{ border-top: 1px solid #013d6c; border-right: 1px solid #013d6c; border-left: 1px solid #3D59b5;}

#menu ul li {margin: 0; padding: 0; border: none;}

#menu ul a {padding: 10px 10px 10px 15px; background: #3D59b5; text-decoration:none; display: block; color: #a0a0ff; border-bottom: 1px solid #7Da9e5; border-top: 1px solid #4695d3; font-family: Verdana, Helvetica , sans-serif ;}

#menu ul ul a {padding: 10px 10px 10px 25px;}

#menu ul a:hover {padding: 10px 10px 10px 15px;
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);}
}
#menu ul {
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);}
</ul>

    added this code to sidebar-single-left.php

    <ul id="menu">
<li <?php if(is_home()) { ?> class="current_page_item"< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">home</a></li>
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

    and replaced the old files by these. nothing happened.

    I think somewhere wordpress doesn’t know that I’m intending to use this css for the menu that is currently in the left sidebar. I suspect the link between the php &css file is wrong.

    Any ideas?

    Thread Starter Aquinox

    (@aquinox)

    edit: used ‘inspect element’ in opera and found the menu was called #sb-container , after I changed the names of the menu elements it changed ??
    didn’t have to change anything to the php files, in fact it showed an error message after I changed my css elements to sb-container until i reverted to the original php file.
    so now I only need to get my css fixed as it shows all the way at the bottom of page..

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Made my own menu with CSS – where to implement it in WP ?’ is closed to new replies.