ThemeShaper Forums » Thematic

Adding a Nav Bar

(14 posts)
  • Started 4 years ago by TeluguCinemaToday
  • Latest reply from Ian Stewart
  • This topic is resolved

  1. TeluguCinemaToday
    Member

    Hello everyone.

    I started a blog yesterday - telugucinematoday.com and spent some time customizing the Thematic theme to my tastes.

    How do I add a Nav Bar? I want to add a section right below the header graphic with 'Home, "About' etc

    Speaking of 'About', originally, there was an 'About' right beneath the header graphic but for some reason, it's disappeared. Instead, if you put ur mouse in the white space right below the header graphic, the cursor points to a link to the home page just like the header graphic. What's going on here? Did I set some parameters wrong?

    Any help would be duly appreciated :)

    Thanks!
    TCT

    Posted 4 years ago #

  2. Ian Stewart
    Key Master

    The default style.css in the Thematic directory has a good example of how to create a navbar. Look under the heading /* =Menu.

    Posted 4 years ago #

  3. TeluguCinemaToday
    Member

    Hello Ian

    I think I understood the concept regarding the menu positions but was only able to retrieve the 'About' tab underneath my header.

    I tried all kinds of different permutations under <div> tags in the header.php but haven't been able to put the Home tab next to the About tab.

    This is the code in my /* =Menu section -

    #access {
    font-size:12px;
    font-weight:bold;
    background:#fff;
    border-top:1px solid #CADEF0;
    margin-top:-1px;
    }
    .skip-link {
    display:none;
    }
    #menu {
    padding:7px 0 8px 0;
    overflow:hidden; /* clears the inner float */
    }
    #menu ul {
    margin:0;
    list-style:none;
    clear:both;
    }
    #menu ul ul {
    display:none;
    }
    #menu li {
    display:inline;
    }
    #menu a {
    display:block;
    float:left;
    margin:0 10px 0 0;
    padding:1px 6px;
    background:#fff;
    color:#002BFF;
    border-bottom:1px solid #002BFF;
    text-decoration:none;
    }
    #menu a:hover {
    background:#5C9BD1;
    color:#fff;
    border-color:#002BFF;
    }
    #menu .current_page_item a {
    background:#5C9BD1;
    color:#fff;
    border-color:#002BFF;
    }
    #menu a:focus {
    background:#4887BD;
    color:#fff;
    border-color:#2772B3;
    }

    I tried entering this into my header.php -

    <div id="menu">

  4. ">HOME


    5. </div>

    I also tried -
    <div id="menu">

    </div>

    Of the 20 ways I tried, those 2 were the closest and even then, they just put the Home tab ABOVE the About tab (into the header graphic)

    What should I put in my header.php to get the Home tab next to the About tab?

    Thanks
    TCT

Posted 4 years ago #

  • TeluguCinemaToday
    Member

    Oh, btw, I went through the sdefault style.css in the Thematic directory and thats how I was able to get my 'About' back :)

    But not home :(

    Posted 4 years ago #

  • Ian Stewart
    Key Master

    Ah, I see now. This is a tough one to answer without writing out a whole tutorial. You didn't need to edit any of the Thematic files to accomplish what you've set out to do.

    You've got a link to your home page in the header because it's supposed to be there. Use that link to display your header graphic with CSS instead of adding javascript to the parent theme file. Take a look at how I'm branding Thematic on ThemeShaper for an example.

    To add a home link into your nav read How To Protect Your WordPress Theme Against Upgrades.

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    What if I want to put more links in my nav bar? Like Advertise, Contact etc. How can I get those next to my About Tab?

    Posted 4 years ago #

  • Ian Stewart
    Key Master

    If you make new pages they'll show up automatically. Or you can make a custom menu. Read How I used a WordPress Child Theme To Redesign My Blog The Smart Way to see how I made a custom menu.

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    Thanks Ian! I finally got the nav bar I wanted. Been tinkering with it every chance I got at work :)

    www.telugucinematoday.com

    Is there a way I can delete the 'About' tab now? I figure I can just add it to the nav bar rather than have it hover in b/w the nav bar and the content

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    lol nevermind, my mind's fried from a long day, it just hit me.......all I have to do is delete the page and it automatically disappears

    Ok, I am moving onto adding some 125x125 boxes to the right side of my blog. I intentionally left space in order to place 2 boxes there. Any suggestions as to how I should approach this?

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    I am using the 2-column-left layout which has primary and secondary widgets on the left. Is there a way I can modify the code to get primary and secondary widgets on the right also? basically, make it a 3 column widgets-posts-widgets look?

    Posted 4 years ago #

  • Ian Stewart
    Key Master

    I'll be making a sample stylesheet that will take care of this.

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    oh wow thanks!

    Posted 4 years ago #

  • TeluguCinemaToday
    Member

    I have been trying to alter the 3-column-right one into a widget-post-widget look, but can't seem to get the alignment right, what do you suggest I do with the code?

    /*
    LAYOUT: Three-Column (Right)
    DESCRIPTION: Three-column 950px fixed layout with two sidebars right of content
    */

    #header {
    position:relative;
    }
    #branding {
    width:940px;
    margin:0 auto;
    }
    #access {
    position:relative;
    overflow:hidden;
    }
    #menu {
    width:940px;
    margin:0 auto;
    }
    #main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    }
    #container {
    width:540px;
    float:left;
    margin:0 0 0 10px;
    }
    #content {
    overflow:hidden;
    }
    #primary {
    width:220px;
    float:right;
    margin:0 10px 0 20px;
    }
    #secondary {
    width:140px;
    float:right;
    margin:0 0 0 10px;
    }
    #footer {
    clear:both;
    }
    #subsidiary {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    }
    #subsidiary .aside {
    width:300px;
    float:left;
    margin:0 10px 0 10px;
    }
    #subsidiary #third {
    margin:0 0 0 10px;
    }
    #siteinfo {
    clear:both;
    width:940px;
    margin:0 auto;
    }

    Posted 4 years ago #

  • Ian Stewart
    Key Master

    Check the trunk version for that 3 column layout.

    Posted 4 years ago #

    • RSS feed for this topic

    Reply

    You must log in to post.