Help with Nav Bar

[bbilal]

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.

http://i55.tinypic.com/33c5blv.jpg

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 :)

[Beverleyh]

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.

[bbilal]

www.t-clicks.com/test

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

[bbilal]

I would like you to check the ho:over 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 :)

[Beverleyh]

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.

[bbilal]

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?

[Beverleyh]

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

[bbilal]

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!

[bbilal]

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?

[bbilal]

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);
?>

[bbilal]

Can I have someone please it's urgent?

[bbilal]

They are using this image and i am conflicting with this..

http://www.blogsmithmedia.com/www.engadget.com/media/ENGSPRITE.png for buttons classic mobile HD and alt

Is it can be done without images just using background color?