Search
 
 

Display results as :
 

 


Rechercher Advanced Search
Latest topics
» New button
NAV BAR on side EmptyWed Jan 06, 2016 9:14 am by Admin

» Scrolling Widgets
NAV BAR on side EmptySat Oct 24, 2015 3:13 am by Admin

» Questions on forumotion
NAV BAR on side EmptyTue Aug 25, 2015 12:55 am by Admin

» Adding affiliates
NAV BAR on side EmptySat Aug 22, 2015 6:57 am by Admin

» hash tagging
NAV BAR on side EmptySat Aug 22, 2015 6:43 am by Admin

» Alert system
NAV BAR on side EmptySat Aug 22, 2015 6:41 am by Admin

» Facebook for kumari
NAV BAR on side EmptyFri Aug 21, 2015 1:10 am by Admin

» Countdown for the site
NAV BAR on side EmptyFri Aug 21, 2015 12:54 am by Admin

» background on top of background
NAV BAR on side EmptyFri Aug 21, 2015 12:47 am by Admin

» transparent background
NAV BAR on side EmptyMon Aug 17, 2015 12:34 pm by Admin

Click below for our World Map
 photo Kumari draft4_zpsyulb95s8.png
Switch Accounts


Control Panel

Code: Select Content

Your profile

Information

Preference

Signature

Avatar

Social

Friends and Foes

Memberlist

Groups

Private messages

Inbox

PM sent

Other

Topic is being watched


 

 NAV BAR on side

Go down 
AuthorMessage
Admin
Admin



Posts : 71
Join date : 2014-04-29

NAV BAR on side Empty
PostSubject: NAV BAR on side   NAV BAR on side EmptyThu Jun 19, 2014 1:50 pm

Go to Administration Panel ► Display ► Templates ► General and edit (Edit) the overall_header template.

Locate this part of the template, which contains the variable {GENERATED_NAV_BAR} :

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

and replace it with :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

Explanation :

By placing the variable that generates the navigation bar in a div, and giving it the class vertical_nav, will allow us to modify its style with CSS.

Once the modifications are complete​​, save and publish the template by clicking the green plus "Add" in the template list.

Modifying the CSS stylesheet

Go to Administration Panel ► Display ► Colors ► CSS stylesheet tab.

Add the following code to your sheet :
Code:
div.vertical_nav {
    position:absolute;
    top:50px;
    left:5%;
}

Explanation :
position:absolute; allows us to place the navigation bar as a floating element
top:50px; allows us to position our block 50 pixels from the top of the page
left:5%; allows us to position our block 5% from the left of the page

Note: If you want the block to stay where it is while scrolling the page, you must replace position:absolute; with position:fixed;

To finish, add the following code to your sheet :
Code:
div.vertical_nav a.mainmenu {
    display:list-item;
    list-style:none;
}

Explanation :
display:list-item; allows us to see the links in the navigation bar as a list from top to bottom
list-style:none; allows us to remove the style originally assigned to the lists (the bullets : •)

If you want to add a border to your navigation as in the demonstration above, just add on to the style of the element div.vertical_nav :
Code:
div.vertical_nav {
    background:#FFFFFF;
    border:1px solid #D0D0D0;
}

Explanation :
background:#FFFFFF; allows us to color the background of the block white
border:1px solid #D0D0D0; allows us to add a solid gray border of 1px

url: http://help.forumotion.com/t132126-phpbb2-have-a-vertical-navigation-bar#886922
Back to top Go down
http://tester.omgforum.net
 
NAV BAR on side
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
 :: Your first category ::  Rose :: North :: Codes-
Jump to: