The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make a nice styled navigation bar?

View previous topic View next topic Go down

Solved How to make a nice styled navigation bar?

Post by Cesar on December 8th 2013, 1:13 pm

Hello. How can i make a nice styled menu like this:
 

 Thank you!

Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Legolas on December 8th 2013, 1:13 pm

Hello,
What type of forum are you using ? (phpBB3, punBB etc..)

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Cesar on December 8th 2013, 1:14 pm

Hello! I am using punBB .

Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Legolas on December 8th 2013, 1:24 pm

Thanks!

Add to your CSS Stylesheet ( ACP ~> Display ~> Colors ~> CSS Stylesheet ):
Code:

#main-nav {
margin-top: 1.8em;
margin-bottom: 0;
background: #485160!important;
background: -webkit-gradient(linear, left top, left bottom, from(#485160), to(#37404f));
background: -webkit-linear-gradient(#485160, #37404f);
background: -moz-linear-gradient(center top, #485160 0%, #37404f 100%);
background: -moz-gradient(center top, #485160 0%, #37404f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#485160,endColorstr=#37404f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#485160, endColorstr=#37404f)";
border: 1px solid #151e2d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px #8c95a4;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px #8c95a4;
}
#main-nav ul {
list-style: none;
margin: 0;
}
#main-nav ul li.first {
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a:hover {
background: #262f3e;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-bottom: 2px solid #a4c346;
padding-bottom: 5px;
color: #fff;
}
#main-nav ul li a {
display: inline-block;
padding: 7px 14px;
border-right: 1px solid #151e2d;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-o-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
color: #eeeff3;
text-shadow: 0 1px 0 #151e2d;
font-weight: bold;
}
Now, find in your overall_header  
Code:
<div id="pun-head">Codes codes codes.. more codes.. more and more codes.</div>
and replace it with:
Code:

<nav id="main-nav">
<ul id="mm1">
<li class="first dashboard active"><a href="/forum"><span>Forums</span</a</li>            
<li class="knowledgebase "><a href="/search"><span>Search</span></a</li>
<li class="blog"><a href="/groups"><span>Groups</span></a></li>
<!-- BEGIN switch_user_logged_in -->
<li class="blog"><a href="/profile?mode=editprofile"><span>Profile</span></a></li>
<li class="blog"><a href="/privmsg?folder=inbox"><span>Inbox</span></a></li>
<li class="blog"><a href="/login?logout"><span>Logout</span></a></li>
<!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_out -->
<li class="blog"><a href="/register"><span>Register</span></a></li>
<li class="blog"><a href="/login"><span>Login</span></a></li>
<!-- END switch_user_logged_out -->

</ul>
<div class="clear"></div>
</nav>
Should be okay.

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Cesar on December 8th 2013, 1:38 pm

Thank you very much Legolas! Solved.

Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Legolas on December 8th 2013, 1:49 pm

Your welcome! Wink

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Van-Helsing on December 8th 2013, 5:21 pm

Hi all,
Can I have it for phpbb2 please?

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by Legolas on December 8th 2013, 5:23 pm

Yes, sure you can. Please make a new suppor topic, it's a little bit different.

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: How to make a nice styled navigation bar?

Post by SLGray on December 9th 2013, 12:16 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum