Sidebar Code

Keryth987

OK, below is the code I am using to setup a Sidebar navigation on what is becoming my testbed/template site. All of this code comes from NinjaFlashX's post in the HUGE CSS Discussion tiopic

/*Move Menu to Sidebar*/
.page-title { display: none;}

.tabnav a:link, .tabnav a:visited, .tabnav a:active, .tabnav a:hover {
color: midnightblue;
font-size: 12pt; font-family:'Audiowide';
text-shadow: 1px 2px 1px white, -1px -2px 1px white;}

.tabnav a:link, .tabnav a:visited {
background: none repeat scroll 0 0 transparent;
border: medium none transparent;
line-height: 20px;}

.tabnav {
background: none repeat scroll 0 0 transparent;
padding-left: 0;
position: fixed;
width: 130px;}

.tabnav a.active:link, .tabnav a.active:visited {
background: none repeat scroll 0 0 transparent;
border: inherit;
color: black;}

.tabnav a {
margin-bottom: 5px;}

.tab-container {
left: -125px;
padding-left: 0;
position: relative;}

/*Remove the below tabs from the menu*/
li.forum {display:none;}
li.calendar {display:none;}
li.maps {display:none;}
li.items {display:none;}


What my issue is, is this puts the sidebar up on the elft, which I love, but the sidebar is not displaying on IPads and other mobile devices. Also, I'm looking for a way to use this but still have the nav buttons on the top as well.

As always, any help is appreciated

Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york

Langy

Yeah, sidebars won't display on ipads/etc. There's just not enough room.

The way I handled this in Edgerunners was to create both the sidebars and a navigation table at the bottom of the page, similar to the ones at Wikipedia.

Keryth987

Well, what I am trying to d is use the above code for a sidebar WITHOUT it removing the default navigation tabs OP supplies

Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york

Langy

Well, sure, but OP's default nav tabs only lead to a few destinations - I wouldn't use a sidebar to navigate to them, honestly.

Though now that I look at your post a bit closer, I now see that you're trying to *move* the default OP navigation tabs to the side. This can work, sure, but be aware that on small screens (like on tablets) you won't be able to see the sidebar.

I use the following code to eliminate sidebars that won't appear due to screen size (thus cleaning up my site). You can modify it so that it'll make it so your sidebar with the OP nav tabs will appear when the screen is large enough, but won't appear when it's too small. Basically, stick '@media screen and (max-width:1275px)' right above each of your CSS declarations for moving the navbar to the side, and it'll force the regular navbar to be displayed when the screen resolution is too small.

---------------

@media screen and (max-width: 1275px){
.sidebar-left, .sidebar-right, .sidebar-right2{
display:none;
}
}

@media screen and (min-width: 1375px){
.sidebar-right, .sidebar-right2{
width:200px;
}
}

@media screen and (min-width: 1475px){
.sidebar-right, .sidebar-right2{
width:250px;
}
}

@media screen and (max-height: 600px){
.sidebar-bottom{
display:none;
}
}

@media screen and (max-height: 425px){
.sidebar-top{
display:none;
}
}


EDIT: This probably won't work if the site is in 'mobile display mode', but I have no idea what changes are made there. I'm pretty sure it drastically limits what CSS can do, since it does things like eliminate backgrounds. I always just display the full site when surfing on my android phone, rather than limit myself to the mobile version.

Keryth987

Thanks for the suggestions all, bnut it still is not reproducing what I'm trying to do. May not be possible.

What I want is BOTH navigation bars, the one on the side and the regular OP one. And I'm trying to avoid having to create a custom side navigation, but do it through CSS


Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york

Langy

Yeah, that's *not* possible with CSS. CSS can't duplicate things - it can only style them.