Jump to content
Sign in to follow this  
areafivesixonehotmailcom

Tippy top nav links

Recommended Posts

areafivesixonehotmailcom

Hi, I'm trying to add two little links above my site branding (logo) on the right hand side of the platform theme. Just like Google homepage for example how it says 'iGoogle Search Settings Sign In' minus the border-bottom. I tried entering in some html in the header script section of the platform settings, but I can't change the size of the text links and they are too big...i feel like a dummy.... Any help would be great! Thanks

Share this post


Link to post
Share on other sites
nett-ed

A possible solution would be to use a hook to add custom html to the header via the functions.php file that references a custom menu to populate some links. This would go in your functions.php file in the platform theme directory at the very end:

	
		add_action('pagelines_header', 'custom_top_nav');
	
		function custom_top_nav(){
			?>
			<div class="top-nav" class="fix">
				<?php wp_nav_menu( array('menu' => 'Top Nav' )); ?>
			</div>
	<?php }
	

In the wordpress admin area under the Appearance >> Menus section you'll have to create a menu called Top Nav Any links you add to that menu should now show up on your site at the top.

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

Thanks, for your help. The links do appear at the top but are stacked vertically and lowercase. Do you know what I could do to set: font size, underline, uppercase and get them to line up with the right side of the theme edge? Thanks in advance!

Share this post


Link to post
Share on other sites
bryan-hadaway

I'll need a link so I can test hands on, but it may be something along the lines of: ` #nav ul li a{ text-transform:uppercase; text-decoration:underline; display:inline-block} ` Or if you're on PlatformPro: ` #nav_row ul li a{ text-transform:uppercase; text-decoration:underline; display:inline-block} ` Thanks, Bryan

Share this post


Link to post
Share on other sites
basmati

it'll work that way:

ul#menu-top-nav li{
	text-decoration:none;
	display:inline;}

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

Hi, Where would these #nav or ul codes go? Bryan do you have a way I can pm you?

Share this post


Link to post
Share on other sites
basmati

if you work with a child theme: in the platform base folder within the base.css file: here is the path: wp-content/themes/platformbase/base.css

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

OKay I added Bryan's Functions.php script above and tried Peter and Bryan's base.css script and the links are still stacked and left aligned. I am using platformprodev If that helps. Does this help?

Share this post


Link to post
Share on other sites
basmati

ok - this CSS goes to the base.css file (platformbase folder):

ul#menu-top-nav li{text-decoration:none;
	display:inline;}
this goes to the functions.php (platformbase folder)
add_action('pagelines_header', 'custom_top_nav');
	function custom_top_nav(){
	?>
	<div class="top-nav" class="fix">
	<?php wp_nav_menu( array('menu' => 'Top Nav' )); ?>
	</div>
	<?php }

and dont forget:

In the wordpress admin area under the Appearance >> Menus section you'll have to create a menu called Top Nav
i just tried it and it works.

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

Okay Thanks Peter. I have done what you suggested and am having this problem: Since I created a main navigation before under appearance>menus> for the site navigation called "Main" When I created the new menu called 'Top Nav' And changed the codes, Paltformbase>functions.php and base.css, it shows the Main nav stacked vertically. Please see alanjameswebdevelopment.com/mda-usa/

Share this post


Link to post
Share on other sites
nett-ed

Jessica, Please make sure you only have the css code that Peter posted above. Code refereced previous to Peter's post is too general so it's affecting the rest of the navigation sections. Just use

ul#menu-top-nav li{text-decoration:none;
	display:inline;}

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

I don't know. I feel like im getting colder. At first I had the two links on top I wanted, just needed to format them and position them. Now I have the wrong links listed above. :( alanjameswebdevelopment.com/mda-usa/

Share this post


Link to post
Share on other sites
areafivesixonehotmailcom

with much respect for your help!! Just not getting it to work.

Share this post


Link to post
Share on other sites
basmati

Brilliant! Very nice and good video tutorial. WP sections appear to me as a new startingpoint for learning implementation of wp elements! Thanks to you Adam, i've learned a lot the last days. But just one question:-) is there a way to to make this new globalnav a dropdown Menu?

Share this post


Link to post
Share on other sites
cmunns

yes there is, but you would have to have similar classes applied as are placed in section.nav.php like this `wp_nav_menu( array('menu_class' => 'main-nav sf-menu', 'container' => null, 'container_class' => '', 'depth' => 3, 'theme_location'=>'primary') );`

Share this post


Link to post
Share on other sites
basmati

yes, (based on your videotutorial) it works with a change of "theme_location" to "globalnav"

wp_nav_menu( array('menu_class' => 'main-nav sf-menu', 'container' => null, 'container_class' => '', 'depth' => 3, 'theme_location'=>'globalnav') );

great, thank you!

Share this post


Link to post
Share on other sites
basmati

But i can't make this new menu "inline" - what ever i try its stacked in a block ... Do i have to add another class name for the new navigation in the "section.nav.php "? maybe i'm still sleeping - heres the css:

#secondary-nav {
				font-size: 0.9em;
				line-height: 1em;
				text-align: left;
				margin-top: 0px;
				z-index:31;  /* Fancybox Uses 30 */
				position:relative;
			}
			#secondary-nav #nav_row {border-bottom: 1px solid #eee;}
			#secondary-nav .content-pad{
				padding-top: 6px;
			}
				#secondary-nav ul{
					list-style: none;
					display: block;
					margin: 0px 0px 0px 0px;
					padding: 0px;
					float: left;
				}
				#secondary-nav li{position:relative;}
				#secondary-navul li{
					margin: 0px 0px 0px 0px;
					padding: 0px;
					float: left;
					text-align: right;
				}
				#secondary-nav li a{
					color: #777;
					line-height: 1.2em;
					padding: 10px 15px 10px;
					text-decoration: none;
					display: block;
					border: 1px solid transparent;
					border-bottom:none;
					font-weight: lighter;
					font-size: .8em;
					text-transform: uppercase;
					letter-spacing: .04em;
				}
				/*IE6 border color (transparent border fix)*/
				*html #secondary-nav li a{
					border-color: white;
					}
				#secondary-nav .main-nav li a:hover{
					background: #F1F1F1;
				}
					.global li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a{
						background: #000;
					}
				/* Drop Down */
				#secondary-nav ul ul {display: none;}
				#secondary-nav ul ul li {text-align: left;}
				/* @ SubNav Area */
				#subnav_row {
					display: block;
					font-size: .9em;
				}
					#primary-nav #subnav_row ul{
						list-style:none;margin:0;
						width:100%;
					}
					#subnav_row #subnav {
						margin:0 0 0 0px;
					}
					#subnav_row ul li{float: left;}
					#subnav_row li a{
						color:#888;
						display: block;
						padding: 8px 10px;
						border:none;
						text-shadow: #fff 0 .5px .5px;
					}
HTML output:
<div id="globalnav" class="container fix">
					<div class="texture">
						<div class="content">
							<div class="content-pad">
	<div id="secondary-nav" class="global"><ul id="menu-top-nav" class="main-nav sf-menu"><li id="menu-item-100" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-18 current_page_item menu-item-100">Start
	<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-99">Kontakt
	<ul class="sub-menu">
		<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-198">Downloads
	<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-156">Impressum
	<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-153">EN
	<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-152">Login
	</div>
	[/code]

Share this post


Link to post
Share on other sites
basmati

yes - i was sleeping! a space between "ul" and "li" was missing

#secondary-[b]navul[/b] li

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×