Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Help with Nav Bar

  1. #1
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Help with Nav Bar

    Hello Friends,

    I am trying to make this nav bar like in the image! but I am not too expert so unable to do it.



    THis is the code

    <div id="top">

    <?php
    $pagesNav = '';
    if (function_exists('wp_nav_menu')) {
    $pagesNav = wp_nav_menu( array( 'theme_location' => 'header-pages', 'menu_class' => 'topnav', 'menu_id' => 'page-nav', 'echo' => false, 'fallback_cb' => '' ) );};
    if ($pagesNav == '') { ?>
    <ul id="page-nav" class="topnav">
    <?php if ( is_home() ) { ?>
    <li class="first"><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'themejunkie'); ?></a></li>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'themejunkie'); ?></a></li>
    <?php } ?>
    <?php wp_list_pages('title_li='); ?>
    </ul>
    <?php }
    else echo($pagesNav);
    ?>

    <div id="search">
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <input type="text" class="field" name="s" id="s" value="<?php _e('Search in this site...', 'themejunkie') ?>" onfocus="if (this.value == '<?php _e('Search in this site...', 'themejunkie') ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search in this site...', 'themejunkie') ?>';}" />
    <input class="submit btn" type="image" src="<?php bloginfo('template_directory'); ?>/images/icon-search.gif" value="Go" />
    </form>
    </div> <!--end #search -->

    <div class="clear"></div>

    </div> <!--end #top-->

    Default CSS with came

    #top { height:33px; margin:10px 0px 1px 0px; color:#333; line-height:30px; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; }

    /* top navigation */
    .topnav { z-index:99; margin:0px; padding:1px 0px; list-style:none; line-height:1; }
    .topnav a { z-index:100; position:relative; display:block; text-decoration:none; }
    .topnav li { float:left; width:auto; }
    .topnav li a { padding:7px 13px 6px 13px; font-size:11px; font-weight:bold; color:#26b; line-height:18px; text-transform:uppercase; text-decoration:none; }
    .topnav li a:hover, .topnav li a:active { background:#26b; color:#fff; text-decoration:none; }
    .topnav li.first a { background:#26b; color:#fff; }
    .topnav .first { background-color: #26b; color: #fff; }
    .topnav li a.sf-with-ul { }
    .topnav li ul { background:#fff; position:absolute; left:-999em; width:166px; z-index:999; border:1px solid #e6e6e6; border-bottom:none; }
    .topnav li ul li { border-bottom:1px solid #e6e6e6; }
    .topnav li ul li a, .topnav li ul li a:visited { background:#fff; width:140px; padding:7px 13px 6px 13px; color:#26b; font-size:11px; font-weight:bold; border-bottom:none; text-transform:uppercase; }
    .topnav li ul li a.sf-with-ul { padding:7px 13px 6px 13px; }
    .topnav li ul li a:hover { background:#26b; color:#fff; border-bottom:none; }
    .topnav li ul ul { margin:-32px 0px 0px 166px; }
    .topnav li ul ul li a { }
    .topnav li ul li ul li a { }
    .topnav li:hover, .topnav li.hover { position:static; }
    .topnav li:hover ul ul, .topnav li.sfhover ul ul,
    .topnav li:hover ul ul ul, .topnav li.sfhover ul ul ul,
    .topnav li:hover ul ul ul ul, .topnav li.sfhover ul ul ul ul { left:-999em; }
    .topnav li:hover ul, .topnav li.sfhover ul,
    .topnav li li:hover ul, .topnav li li.sfhover ul,
    .topnav li li li:hover ul, .topnav li li li.sfhover ul,
    .topnav li li li li:hover ul, .topnav li li li li.sfhover ul { left:auto; }

    /* topnav indicator */
    .topnav .sf-sub-indicator { display:none; }
    .topnav li ul .sf-sub-indicator { background:url(images/icon-arrow-right.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }

    /* search form */
    #search { display:inline; float:right; height:24px; margin:0px 0px 0px 0px; }
    #search input { float:left; width:190px; margin:2px 0px 0px 0px; padding:4px 6px; font-family:Georgia, serif; font-size:12px; font-style:italic; color:#666; line-height:12px; border:1px solid #ddd; }
    #search input.btn { background:none; border:none; margin:6px 0px 0px -22px; padding:0px; width:auto; }


    Can anyone help me out to make this navBar soon.

    Thanking you in advanced

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    It would be easier to give us a link to your page so we can see the HTML output minus the php.

    Is the image something you have created in Photoshop (or other graphic software) or a screen grab from an existing website?

    If the image is a screen capture from an existing website, there is not much we need to do here as you'll be able to look at their HTML and CSS and doctor it to suit your needs.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    www.t-clicks.com/test

    This domain expiring tomorrow and just left with two things so please help me soon!

  4. #4
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I would like you to check the hover function by visiting the website engadget.com

    and If you can I would like to add the social icons like they had in the footer navBar . [not Improtant] but If you can will be great

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    I can't do much from a BlackBerry but you should be able to download their web page and then gradually remove the scripts, HTML and CSS for the elements you don't want and just leave the parts you do. Do it very slowly, bit by bit, and test at each stage in a browser to make sure you don't delete something that's needed.

    Once you're left with the bits you like, change the CSS sizes, colours and images, etc. and then integrate it into your page.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I tried this first myself but can't do it.. they used li codes and my orignal code is div's code do you use instant messenger?

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    So work with what you have - either change your HTML to use li's or change the CSS li's to reflect your div's
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Can you do it for me because I don't have any idea in programming?

    Do you use any instant messaging!

    my domain going to expire 13 July mean Midgnight US

    I have paste every code here!

  9. #9
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    One more thing If you Can! You can see on the right sidebar I have added google plus and write some text there but when the page load the text comes on the left then go on it's position how it can be fixed?

  10. #10
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    That I have done so faR!


    This is last code

    <div class="footer">
    <div class="tclicks_1">

    <div class="tclicks_inner">
    <div class="t-clicks_classic selected"><a href="index.html"><span>Index</span</a>/div>
    </div>
    </div>

    </div>
    </diiv>
    <div class="clear"></div>


    Now my pages default code in LI and here everything in <div> so I am tired to impement pages into it..

    This is my default code now how you add the above div's into this code?


    <?php
    $pagesNav = '';
    if (function_exists('wp_nav_menu')) {
    $pagesNav = wp_nav_menu( array( 'theme_location' => 'header-pages', 'menu_class' => 'topnav', 'menu_id' => 'page-nav', 'echo' => false, 'fallback_cb' => '' ) );};
    if ($pagesNav == '') { ?>
    <ul id="page-nav" class="topnav">
    <?php if ( is_home() ) { ?>
    <li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'qlogixsolutions'); ?></a></li>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'qlogixsolutions'); ?></a></li>
    <?php } ?>
    <?php wp_list_pages('title_li=&exclude=' . get_theme_mod('about_page')); ?>
    </ul>
    <?php }
    else echo($pagesNav);
    ?>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •