Changing main navigation tabs to seamless line

General questions pertaining to how certain issues can be resolved. This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.
Forum rules
This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.

1. No offensive language and no mocking
2. Please do a thorough search before you post something. Trust us, there is a high probability that the question you are asking has been asked previously.
3. No soliciting. You cannot post here soliciting bids for people offer you quotes, or even offer money to people for some work. You will be moderated if you do so. If you are looking for help, please post your request on http://jobs.wordpress.net or http://codepoet.com
4. Please be reasonable. You are getting software and support. For free. Complicated requests from a general purpose theme are not welcome and some volunteers might lose patience with you.
5. Please do your due diligence. If you posted a query and we answered with a link, take the trouble to go through the link contents.
6. Please post with complete information. Requests for help MUST be accompanied with your URL, particularly if you are asking something like "Why am I seeing a blank space?"
Locked
connecto
Posts: 1
Joined: 07 Mar 2010, 00:49

Changing main navigation tabs to seamless line

Post by connecto » 07 Mar 2010, 01:02

First I have to say that the suffusion theme is just incredible in the features it contains. I have yet to find anything so flexible and easy to use. Not only is is amazing, but it helped me learn many things about blogs, CSS and HTML.

I read many posts, but I don't seem to find an answer to implement a traditional menu bar instead of the suffusion tabs look. I looked at Pixo Menu but even when activated I can't get Pixo to display.

One member of this forum did this at: http://gvrteam.gr/portal/

I am looking to do the same. Does anyone know the way to go about this?

Thanks for any help!

perpetualjon
Posts: 68
Joined: 05 Mar 2010, 22:12
Location: Southern Califiornia
Contact:

Re: Changing main navigation tabs to seamless line

Post by perpetualjon » 07 Mar 2010, 20:48

It looks like you'll need to remove all radius corners, border lines, and padding in the right/left direction. The menu system can be pretty tricky to completely understand but here's an example of what I did on my site (http://www.tranquilitycomputers.com):

Code: Select all

#nav ul {margin: 0 0 -1px 0;}
#nav ul ul {top:23px;}
#nav ul li a,
#nav ul ul li a,
#nav ul ul li a:visited,
#nav a.highlighted,
#nav a,
#nav a:visited,
#nav ul ul a,
#nav ul ul a:visited,
#nav-top ul li a,
#nav-top ul ul li a,
#nav-top ul ul li a:visited,
#nav-top a.highlighted,
#nav-top a,
#nav-top a:visited,
#nav-top ul ul a,
#nav-top ul ul a:visited {padding: 0px 8px 0px 8px;font-weight:normal;}
It's not quite what you're looking for but it may give you a better understanding of just how many code changes there were needed to make it look the way I wanted it. Remember to put this in your Custom Styles box and not actually modify the stylesheet.css as any upgrades to the theme will wipe out your changes. I'd start with this (or something like it) and carefully look through the code and how it's put together. In many cases, I just add another digit to one of the values, save the change, and refresh the page looking to figure out what is different. I'd say I got through all my changes without help from Sayontan's assistance (although I really needed his help on other stuff in the theme).

...As far as removing the rounded corners, Sayontan may need to help you there as I just don't know how to do that. Remember also that making changes to the navigation menu involves a LOT of elements (as you can see above) so make sure to check it against links that you haven't visited yet and in different browsers. Also, if you're going to mess with the tab height (as I did) you may need to turn off the search field as the height of that feature messed with the vertical alignment of the menu (and got a different result between IE and Firefox). Good luck and make sure to share your completed site with us here!

migf1
Posts: 50
Joined: 11 Nov 2009, 02:59

Re: Changing main navigation tabs to seamless line

Post by migf1 » 01 Apr 2010, 05:36

connecto wrote:First I have to say that the suffusion theme is just incredible in the features it contains. I have yet to find anything so flexible and easy to use. Not only is is amazing, but it helped me learn many things about blogs, CSS and HTML.

I read many posts, but I don't seem to find an answer to implement a traditional menu bar instead of the suffusion tabs look. I looked at Pixo Menu but even when activated I can't get Pixo to display.

One member of this forum did this at: http://gvrteam.gr/portal/

I am looking to do the same. Does anyone know the way to go about this?

Thanks for any help!
Hello, it is indeed the PixoPoint Menu plugin (I'm the owner of the above blog ;)).

What you need to do is to manually edit the file:
wp-content/themes/suffusion/header.php

and add this line of code:
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>

in the place you want the menu to appear (always keep a backup of the original files before you change them, header.php in this case).

I'm pasting the portion of my header.php file, so you can see where exactly I have put the menu:

Code: Select all

</head>
<body>
	<div id="page" class="fix">
		<div id="wrapper" class="fix">
			<div id="header-container" class="fix">
				<?php
					suffusion_page_header();
				?>
			</div><!-- //#header-container -->
			<div id="container" class="fix">
				<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();}; ?>

				<?php
					suffusion_after_begin_container();
				?>
The same piece of information is also available inside PixoPoint Menu's Settings screen, once you install it on your blog (tab: Help).

But please keep in mind that I have also modified the CSS of the menu, in order to look the way it does on my blog.

I hope I helped!

PS. Santoyan, please allow me another 4-5 days for translating the strings.

saving4change
Posts: 2
Joined: 03 Sep 2011, 11:40

Re: Changing main navigation tabs to seamless line

Post by saving4change » 03 Sep 2011, 11:46

I know this is an old posting but I just had to send a HUGE THANK YOU for the info! I know nothing about design/css/or whatever all this stuff is and your info above worked perfect! I'm OCD about my lines being clean and this was great info. I'm loving this suffusion theme so much more than others I've tried. :D

sayontan
Site Admin
Posts: 10210
Joined: 15 Sep 2009, 16:39
Location: Houston, Texas
Contact:

Re: Changing main navigation tabs to seamless line

Post by sayontan » 03 Sep 2011, 18:36

Actually a few months after the last post in this thread the functionality was provided as a default option in Suffusion. Within the admin menu if you go to Other Graphical Elements -> Main Navigation Bar -> Main Navigation Bar Look and Feel -> Menu Item Style, and set it to pick "Show menu items as a continuous list"

Locked