Help wanted with basic editing for a main navigation bar

CMS & WordPress
1

Hi,
I would greatly appreciate if someone could help me with my website. I would like to move my main navigation bar lower right above the content of the website, make it show individual buttons for all my categories as it currently shows one button for all categories.
Optionally i would like some help with a few floating buttons/icons above the right side of the bar for hot tags that i usually use in posts like LOL WIN FAIL etc.

Any advice and help would be really really appreciated!


<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head><?php global $data; ?>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
	<meta charset="<?php bloginfo('charset'); ?>">
	<?php if($data['uxde_responsive']): ?>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />		
	<?php endif; ?>

	<title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>
	
	<!-- Included CSS Files -->
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/styles/<?php if($data['uxde_color_scheme']): ?><?php echo $data['uxde_color_scheme']; ?><?php endif; ?>/css.css">
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500,600' rel='stylesheet' type='text/css'>

	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	
	<!--[if (gte IE 6)&(lte IE 8)]>
	  <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/selectivizr.js"></script>
	<![endif]-->

	<!-- Favicon and Feed -->
	<?php if($data['uxde_favicon']): ?><link rel="shortcut icon" href="<?php echo $data['uxde_favicon']; ?>" type="image/x-icon" /><?php endif; ?>
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Feed" href="<?php echo home_url(); ?>/feed/">
	
	<!--  iPhone Web App Home Screen Icon -->
	<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png" />

	<style type="text/css">

		.meta-category.color-1 a {
                                                                        background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_2']): ?><?php echo $data['uxde_article_text_2']; ?><?php endif; ?> ! important;
									
									}

		.meta-category.color-2 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_2']): ?><?php echo $data['uxde_article_text_2']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-3 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_3']): ?><?php echo $data['uxde_article_text_3']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-4 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_4']): ?><?php echo $data['uxde_article_text_4']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-5 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_5']): ?><?php echo $data['uxde_article_text_5']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-6 a {
									background: rgba(255, 34, 0, 0.3);;
									color: <?php if($data['uxde_article_text_6']): ?><?php echo $data['uxde_article_text_6']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-7 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_7']): ?><?php echo $data['uxde_article_text_7']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-8 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_8']): ?><?php echo $data['uxde_article_text_8']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-9 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_9']): ?><?php echo $data['uxde_article_text_9']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-10 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_10']): ?><?php echo $data['uxde_article_text_10']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-11 a {
									background: rgba(255, 34, 0, 0.3);
									color: <?php if($data['uxde_article_text_11']): ?><?php echo $data['uxde_article_text_11']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-12 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_12']): ?><?php echo $data['uxde_article_text_12']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-13 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_13']): ?><?php echo $data['uxde_article_text_13']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-14 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_14']): ?><?php echo $data['uxde_article_text_14']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-15 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_15']): ?><?php echo $data['uxde_article_text_15']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-16 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_16']): ?><?php echo $data['uxde_article_text_16']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-17 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_17']): ?><?php echo $data['uxde_article_text_17']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-18 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_18']): ?><?php echo $data['uxde_article_text_18']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-19 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_19']): ?><?php echo $data['uxde_article_text_19']; ?><?php endif; ?> ! important;
									}

		.meta-category.color-20 a {
									background: rgba(255, 26, 0, 0.3);
									color: <?php if($data['uxde_article_text_20']): ?><?php echo $data['uxde_article_text_20']; ?><?php endif; ?> ! important;
									}

	</style>

	<style type="text/css">

		<?php if($data['uxde_custom_css']): ?><?php echo $data['uxde_custom_css']; ?><?php endif; ?>

	</style>

	<?php wp_head(); ?>
	
</head>

<body <?php body_class(); ?>>

<nav id="top-navigation">

	<div class="wrapper">

		<ul class="top-menu-left">

			<li class="small-logo"><a href="<?php echo home_url(); ?>"><span class="home-icon"></span></a></li>

			<li class="categories">

				<a><span class="categories-icon"></span><?php _e('Divertisment', 'uxde'); ?></a>

				<div class="dropdown-menu categories">

					<div class="categories-menu-section">

						<?php /*
							Our navigation menu. If one isn't filled out, wp_nav_menu falls
							back to wp_page_menu. The menu assigned to the primary position is
							the one used. If none is assigned, the menu with the lowest ID is
							used. */
							
							wp_nav_menu( array(
							'theme_location' => 'categories_navigation',
							'container' =>false,
							'menu_class' => 'categories-menu',
							'echo' => true,
							'before' => '',
							'after' => '',
							'link_before' => '',
							'link_after' => '',
							'depth' => 3,
							'items_wrap' => '<ul class="categories-menu">%3$s</ul>')
						); ?>

					</div>

				</div>

			</li>

			<li class="hot-tags">

				<a><span class="tags-icon"></span><?php _e('Hot Tags', 'uxde'); ?></a>

				<div class="dropdown-menu hot-tags">

					<div class="hot-tags-menu-section">
	
						<?php /*
							Our navigation menu. If one isn't filled out, wp_nav_menu falls
							back to wp_page_menu. The menu assigned to the primary position is
							the one used. If none is assigned, the menu with the lowest ID is
							used. */
							
							wp_nav_menu( array(
							'theme_location' => 'tags_navigation',
							'container' =>false,
							'menu_class' => 'hot-tags-menu',
							'echo' => true,
							'before' => '',
							'after' => '',
							'link_before' => '',
							'link_after' => '',
							'depth' => 3,
							'items_wrap' => '<ul class="hot-tags-menu">%3$s</ul>')
						); ?>

					</div>

				</div>

			</li>

		</ul>

		<ul class="top-menu-right">

			<li class="search">

				<a><span class="search-icon"></span><?php _e('Search', 'uxde'); ?></a>

				<div class="dropdown-menu search">

					<?php get_search_form( true ); ?>

				</div>

			</li>
	
			<li class="twitter">

				<a><span class="twitter-icon"></span><?php _e('Follow Us', 'uxde'); ?></a>

				<div class="dropdown-menu social-icons">

					<div class="social-icons-section">

						<h4><?php _e('Follow Us', 'uxde'); ?></h4>

						<ul>
			
							<?php if($data['uxde_rss_feed']): ?><li><a href="<?php echo $data['uxde_rss_feed']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/rss_icon@2x.png"></a></li><?php endif; ?>

							<?php if($data['uxde_email_url']): ?><li><a href="<?php echo $data['uxde_email_url']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/email_icon@2x.png"></a></li><?php endif; ?>
				
							<?php if($data['uxde_twitter_username']): ?><li><a href="http://twitter.com/<?php echo $data['uxde_twitter_username']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/twitter_icon@2x.png"></a></li><?php endif; ?>
				
							<?php if($data['uxde_facebook_fanpage']): ?><li><a href="<?php echo $data['uxde_facebook_fanpage']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/facebook_icon@2x.png"></a></li><?php endif; ?>

							<?php if($data['uxde_google_plus_url']): ?><li><a href="<?php echo $data['uxde_google_plus_url']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/google_icon@2x.png"></a></li><?php endif; ?>

							<?php if($data['uxde_pinterest']): ?><li><a href="<?php echo $data['uxde_pinterest']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/pinterest_icon@2x.png"></a></li><?php endif; ?>

						</ul>

					</div>

					<div class="facebook-box-section">

						<h4><?php _e('Facebook Fanpage', 'uxde'); ?></h4>

						<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php if($data['uxde_facebook_fanpage']): ?><?php echo $data['uxde_facebook_fanpage']; ?><?php endif; ?>&amp;width=350&amp;height=245&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=140836909399878" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:245px;" allowTransparency="true"></iframe>

					</div>

				</div>

			</li>

			<li class="share">

				<a><span class="share-icon"></span><?php  _e('Share', 'uxde'); ?></a>

				<div class="dropdown-menu share-buttons">

					<?php
						function curPageURL() {
						$pageURL = 'http';
						if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
						$pageURL .= "://";
						if ($_SERVER["SERVER_PORT"] != "80") {
						$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
						} else {
						$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
						}
						return $pageURL;
						}
					?>

					<ul>

						<li class="twitter-button"><a href="http://twitter.com/share" data-url="<?php echo curPageURL(); ?>" data-text="<?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?>" class="twitter-share-button" data-count="horizontal" data-via="<?php if($data['uxde_twitter_username']): ?><?php echo $data['uxde_twitter_username']; ?><?php endif; ?>">Tweet</a></li>
						<li class="facebook-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo curPageURL(); ?>&layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 92px" allowTransparency="true"></iframe><div id="fb-root"></div></li>
						<li class="google-button"><g:plusone size="medium"></g:plusone></li>
						<li class="linkedin-button"><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share"></script></li>
						<li class="pinterest-button"><a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo curPageURL(); ?>&media=<?php if (has_post_thumbnail( $post->ID ) ): ?><?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?><?php echo $image[0]; ?><?php endif; ?>&description=<?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?>" class="pin-it-button" count-layout="horizontal" always-show-count="true"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>

						<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

						<script>(function(d, s, id) {
  						var js, fjs = d.getElementsByTagName(s)[0];
  						if (d.getElementById(id)) return;
  						js = d.createElement(s); js.id = id;
  						js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=143969905702939";
 						 fjs.parentNode.insertBefore(js, fjs);
						}(document, 'script', 'facebook-jssdk'));</script>
	
						<script type="text/javascript">
  						(function() {
    					var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    					po.src = 'https://apis.google.com/js/plusone.js';
   				 		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  						})();
						</script>

					</ul>

				</div>

			</li>

			<li class="turn-off">

				<a><span class="turn-off-icon"></span><?php _e('Off Drop', 'uxde'); ?></a>

			</li>

		</ul>

	</div>

</nav>
		

<div class="body-content">
	
<header id="header">

	<div class="wrapper">
					
	<div class="logo">

		<?php if($data['uxde_logo']): ?>
			
		<?php if(is_home() || is_front_page()) : ?>

			<h1 class="custom-logo">

				<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php if($data['uxde_logo']): ?><?php echo $data['uxde_logo']; ?><?php endif; ?>" width="<?php if($data['uxde_logo_width']): ?><?php echo $data['uxde_logo_width']; ?><?php endif; ?>" height="<?php if($data['uxde_logo_height']): ?><?php echo $data['uxde_logo_height']; ?><?php endif; ?>" /></a>

				<p><?php bloginfo('name'); ?></p>
							
			</h1>

		<?php else: ?>

			<div class="custom-logo">

				<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php if($data['uxde_logo']): ?><?php echo $data['uxde_logo']; ?><?php endif; ?>" width="<?php if($data['uxde_logo_width']): ?><?php echo $data['uxde_logo_width']; ?><?php endif; ?>" height="<?php if($data['uxde_logo_height']): ?><?php echo $data['uxde_logo_height']; ?><?php endif; ?>" /></a>

			</div>

		<?php endif; ?>

		<?php else: ?>

			<h1><a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

			<p class="subheader"><?php bloginfo('description'); ?></p>

		<?php endif; ?>
						
	</div>

	<?php if($data['uxde_headerads']): ?>
	<div class="header-ads">

		<?php echo $data['uxde_headerads']; ?>

	</div>
	<?php endif; ?>

	</div>
					
</header>
		
<div id="main">

	<div class="main-content">
2

Hi NoBlink. Welcome to the forums. :slight_smile:

That code is not much use to us. Could you either post a live link, or make up a template that demostrates the issue? Here’s a guide to such a template (see the rest of the thread for more options): http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics&p=5406274&viewfull=1#post5406274

3

I’m really sorry about that. I don’t mean to post usless stuff.
This is it!

4

Cool, it’s good to have a link. Could you clarify what you want to do, though, as I can’t quite work out what the question is. :slight_smile:

5

I would like to have the navigation bar under the logo; Have my categories spread on the navigation bar and if possible have a few tag buttons/icons floating in the right hand side over the navigation bar.

It’s really nice of you to try and help!

6

OK, I see. This is more of a WordPress question than a CSS question, as you’ll need to tweak your template(s) to move all those bits and pieces around. I’ve moved the thread to the CMS/WP forum. Good luck with this. :slight_smile: