ThemeShaper Forums » Thematic

[closed]

need a lot of help styling my navigation

(7 posts)
  • Started 6 years ago by kaed
  • Latest reply from helgatheviking
  • This topic is resolved
  1. Hey I'm new to php and struggling with changing the navigation bar to the way I designed it. Basically I just need someone to tell me what I'm doing wrong and point me in the right direction.
    Here's my design though: http://i.minus.com/iEmc6kk0nQwue.png

    I tried removing the thematic_access first:
    function remove_thematic_access() {
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_access');

    Then readding my own version of the access to the header:
    <?php
    function ljs_access() { ?>

    <div id="access">

    <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div><!-- .skip-link -->

    <?php

    if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    echo wp_nav_menu(thematic_nav_menu_args());
    } else {
    echo thematic_add_menuclass(wp_page_menu( ?><img src="/wp-content/themes/lovejerseyshoestheme/images/rightnavend.png" alt="navigation" /><?php thematic_page_menu_args()?> <img src="/wp-content/themes/lovejerseyshoestheme/images/rightnavend.png" alt="navigation" /><?php ));
    }

    ?>

    </div><!-- #access -->

    <?php }

    add_action('thematic_header','ljs_access',9);
    ?>

    CSS:
    .sf-menu{
    border-right: none;
    position: relative;
    float: left;
    margin-left:50px;
    }
    .menu ul li a{
    display:block;
    width:147.5px;
    height:20px;
    background-image:url(images/navsquare.png);
    font:Arial, Helvetica, sans-serif;
    color:#FFF!important;
    font-weight:bold;
    text-align:center;
    padding-top:19px!important;
    }
    .menu ul li a:hover{
    background-image:url(images/navsquarehover.png);
    }

    ^but this obviously doesn't work. I have this coded in html an working I just can't get it working in wordpress! Here's the working non-wordpress version:
    HTML:
    <div id="nav">

    • <img src="images/leftnavend.png" alt="navigation" />
    • <img src="images/seperator.jpg" alt="navigation" />
    • <li class="selected">Home

    • <img src="images/seperator.jpg" alt="navigation" />
    • Popular
    • <img src="images/seperator.jpg" alt="navigation" />
    • Newest
    • <img src="images/seperator.jpg" alt="navigation" />
    • On Sale
    • <img src="images/seperator.jpg" alt="navigation" />
    • <img src="images/rightnavend.png" alt="navigation" />

    </div> <!-- end nav -->

    CSS:
    #nav{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    }

    #nav ul{
    margin-left:15px;
    margin-top:10px;
    position:relative;
    list-style-type:none;
    }

    #nav ul li{
    float:left;
    }

    #nav ul li a{
    display:block;
    width:147.5px;
    height:36px;
    background-image:url(images/navsquare.png);
    font:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    padding-top:12px;
    }

    #nav ul li a:hover{
    background-image:url(images/navsquarehover.png);
    }

    Posted 6 years ago #
  2. bogh
    Member

    I don't think you need to redo the menu, because that navigation menu, as you need it, is pretty simple, so you should stick with the standard one.

    But if you need to change it's position do like below (*the number represents it's position into the header):

    // Remove the standard Thematic menu
    function remove_menu() {
    	remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_menu');
    
    // Moving the thematic menu
    add_action('thematic_header','thematic_access',10);

    And if you need help with CSS design you should provide a link to your live site.

    From what I see you are complicating too much for a simple job (*reffering to the menu), what you need is about some CSS low skills.

    Posted 6 years ago #
  3. I don't have a live site it's on localhost.

    And how would I put http://minus.com/mkULadNM/1f and http://minus.com/mkULadNM/2f on the ends of the navigation bar using pure CSS?

    Posted 6 years ago #
  4. Since I can't see the live site I don't want to provide speculative code..refer to this article and see what you can do: http://icode4you.net/css-tricks-use-two-background-images-for-one-div (the div would be the #nav)

    Posted 6 years ago #
  5. Touching on only the subject of the two background images with rounded corners, just use CSS for the rounded corners and make your life easier by not having to deal with those images at all.

    border-radius: 3px;
    Posted 6 years ago #
  6. Scott is right, you can pretty much make anything look good with css..hell maybe even better sometimes.

    Posted 6 years ago #
  7. IE8 and lower can't support it, but screw them anyway. square corners is a perfectly acceptable look for craptastic microsoft browsers.

    but to echo the sentiment... get it live somewhere if you want more help w/ CSS. even if you just make a fiddle: http://jsfiddle.net/

    Posted 6 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.