Menu non-functional on smartphones after CSS

jasonvey
jasonvey
edited January 2017 in Campaign Portal Building

I've been re-acquainting myself with CSS to do some work on my page--bear with me; it's literally been years since I messed with it. With the help of a number of examples, campaign sites and tutorials I've got a layout I like okay:

http://nocturnumrebirth.obsidianportal.com

Here's the problem. While it looks great on a computer, when viewed on a smartphone, the navbar vanishes completely, and the general OP menu at the top of the screen no longer responds to touch. It seems to work fine on my tablet (a Samsung Galaxy Tab Pro 12.2). Hoping someone can help me work this out. I've tried a sample of code for mobile devices but it hasn't had any effect. 

Here's the CSS code I'm using, most borrowed from various other sources and slightly modified for my needs. I understand it's probably a bit haphazard and sloppy; again, it's been almost 10 years since I messed with CSS. 

 

/*Horizontal Navigation Bar*/

/*Extra space for Links*/

.nav-links li a {margin: 0 8px 0 0;}

/*Change Dimensions and Position of Nav Bar*/

#campaign-nav {width:125%;

position:relative;

left:-60px;

}

/*Remove Background Color from Nav Bar*/

.campaign-public-layout #campaign-nav {

background-color:transparent;

}

/*Move Nav Bar Up*/

.collapsable-nav-row .front-nav-container {

width:125%;

top:-30px;

background-repeat:no-repeat;}

/*Float Nav Bar to Make it Horizontal*/

#campaign-nav ul li {display:inline;float:left;}

/*Remove Triangle after Active Page Link*/

.campaign-public-layout #campaign-nav li.active:after {

content: none;}@

/* Site Content */

.large-12 { top:-45px; }

.main-content-container { left:-35px; width:800px !important; position:left;}

/* Right Sidebar Code */

.sidebar-last-updated {overflow:hidden;}

#sidebar {width:250px; z-index:2; position:absolute; top:500px; left:920px; background-color: transparent; height:100%;}

/*removes default text*/ 

#campaign-nav .nav-text {font-size:0;} 

/*adds customized text*/ 

 

#campaign-nav .dashboard a:after {content:"Dashboard"; font-family:Cinzel; font-size:10px;} 

#campaign-nav .adventure-log a:after {content:"Episode Guide"; font-family:Cinzel; font-size:10px;} 

#campaign-nav .wiki a:after {content:"Nocturnumverse"; font-family:Cinzel; font-size:10px;} 

#campaign-nav .characters a:after {content:"The Cast"; font-family:Cinzel; font-size:10px;}

#campaign-nav .forum a:after {content:"The Feed"; font-family:Cinzel; font-size:10px;}

#campaign-nav .calendar a:after {content:"Calendar"; font-family:Cinzel; font-size:10px;}

#campaign-nav .settings a:after {content:"Settings"; font-family:Cinzel; font-size:10px;}

#campaign-nav .front-page a:after {content:"Opening Credits"; font-family:Cinzel; font-size:10px;}

#campaign-nav .maps a:after {content:"Cartography"; font-family:Cinzel; font-size:10px;}

#campaign-nav .items a:after {content:"Things"; font-family:Cinzel; font-size:10px;}

#campaign-nav .file-docker a:after {content:"Images & Words"; font-family:Cinzel; font-size:10px;}

/* Character Pages */

.character-show { left:100px; width:1000px }

#character-details {

width:110%;

position:relative;

left:50px;

z-index:10;

}

#gm-secrets {

width:110%;

position:relative;

left:50px;

z-index:10;

}

.player-secret {

width:110%;

position:relative;

left:50px;

z-index:10;

}

/* Smartphones and Tablets */

/ SMARTPHONES (PORTRAIT AND LANDSCAPE) /

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/ CSS HERE /

}

/ SMARTPHONES (LANDSCAPE) /

@media only screen and (min-width : 321px) {

/ CSS HERE /

}

/ SMARTPHONES (PORTRAIT) /

@media only screen and (max-width : 320px) {

/ CSS HERE /

}

/ TABLETS (PORTRAIT AND LANDSCAPE) /

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/ CSS HERE /

}

/ TABLETS (LANDSCAPE) /

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/ CSS HERE /

}

/ TABLETS (PORTRAIT) /

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/ CSS HERE /

}

/ DESKTOPS AND LAPTOPS /

@media only screen and (min-width : 1224px) {

/ CSS HERE /

}

/ LARGE SCREENS /

@media only screen and (min-width : 1824px) {

/ CSS HERE */

}

Post edited by jasonvey on

Comments

Sign In or Register to comment.

The first Campaign of the Month for 2021 is Gaxim Plague!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions