WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Making the Navbar Verticle? Empty Making the Navbar Verticle? Mon Feb 08, 2010 10:30 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
Hi guys, As i believe this will be done via CSS so i am asking in the forum. How to make the navbar verticle?
Ani as i already have added the ID in the templates, i think this can be done via css right? Can you tell how/Whats the code for it?

Thanx

2Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Mon Feb 08, 2010 10:38 am

ankillien

ankillien
Administrator
Administrator
Hi,

I remember the ID was "new-nav" Razz
Try adding this to your CSS...

Code:
#new-nav tr td a {
display : block !important;
}

3Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Mon Feb 08, 2010 7:16 pm

shamzblueworld

shamzblueworld
Registered Member
Registered Member
that worked, Excellent bro, you are awesome Very Happy

btw can we <br/> the buttons? i mean can we put some space between the few navbar buttons?

4Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Mon Feb 08, 2010 8:55 pm

ankillien

ankillien
Administrator
Administrator
To make space between them, padding is needed...

Code:
#new-nav tr td a {
display : block !important;
padding-bottom : 10px;
}

5Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 9:01 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
and how about breaking them apart? I mean what about having 2-3 buttons at the top right and others at the left side?

6Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 9:04 am

ankillien

ankillien
Administrator
Administrator
shamzblueworld wrote:and how about breaking them apart? I mean what about having 2-3 buttons at the top right and others at the left side?

For that you might need to create a nav bar your self using tables and put it in the template with id="new-nav-2".

After that, you can use this CSS code for new-nav-2 and adjust its position..

Code:
#new-naw-2 {
position : absolute;
top : 50px;
left : 100px;
}

7Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 9:08 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
for creating the second navbar, can I use that Tut in the tut at tricks at the support forum? the one where we can create 3 navbars?

8Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 9:19 am

ankillien

ankillien
Administrator
Administrator
You don't need to use that tutorial, I think.
You juse need to create a simple table cells having links in it.
Like this...

Code:
<table id="new-nav-2" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center" nowrap="nowrap">
<a class="mainmenu" href="#"><img src="#"></a>
<a class="mainmenu" href="#"><img src="#"></a>
<a class="mainmenu" href="#"><img src="#"></a>
<a class="mainmenu" href="#"><img src="#"></a>
</td></tr></tbody></table>

Just replace the # with appropriate URLs.



Last edited by ankillien on Tue Feb 09, 2010 12:00 pm; edited 1 time in total

9Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 9:26 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
and where do it put this?

10Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 09, 2010 12:07 pm

ankillien

ankillien
Administrator
Administrator
You should put this code in overall_header_new template.
Before this part...

Code:
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker -->

After you save and publish the template, you'll see a new nav bar in your forum. Now you need to use CSS to make it look vertical and adjust its position...

Code:
#new-nav-2 {
position : absolute;
top : 20px; /*change here/*
left : 20px; /*change here/*
}
#new-nav-2 tbody tr td a {
display : block;
}

11Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Tue Feb 16, 2010 8:58 pm

frost00777

frost00777
Registered Member
Registered Member
try these put them in your nav bar css

Code:

-webkit-transform: rotate(180deg);

or

Code:


-moz-transform: rotate(180deg);
or
Code:


transform: rotate(-180deg);


I cant show it to you here, because html isn't on , but yeah Very Happy

http://lordslegends.forumotion.net/

12Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Wed Feb 17, 2010 8:25 pm

shamzblueworld

shamzblueworld
Registered Member
Registered Member
how will it affect?

13Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Fri Jul 26, 2013 12:04 am

Petermichael


Registered Member
Registered Member
asfasghqaweh



Last edited by Petermichael on Fri Sep 13, 2013 4:03 am; edited 1 time in total

14Making the Navbar Verticle? Empty Re: Making the Navbar Verticle? Fri Sep 13, 2013 3:04 am

Peter Michael


Registered Member
Registered Member
Thanks for the coding dud it really helped..:-)

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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