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

  • DerkG
    DerkG
    Posts: 76

    Afraid I can't help you there. But word of warning, you may be running into issues on other screen layouts as well. If I open it full screen (on an ultrawidescreen monitor) the layout is fine, but if I open it in my default half screen mode the sidebar overlaps the main area.

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • cgregory
    cgregory
    Posts: 777

    You do seem to have issues on other resolutions, but your disappearing nav is due to the fact that the OP site has a different layout when it is on a smaller screen. Part of that layout change causes the nav bar to disappear and be part of the menu bar.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • jasonvey
    jasonvey
    Posts: 52

    Right, but the problem is the menu bar doesn't function in mobile mode. When I tap the menu icon, it doesn't register. Any thoughts?

    Also, any thoughts as to how I can fix the sidebar overlap issue would be appreciated. 

  • Kallak
    Kallak
    Posts: 1,090

    @jasonvey, I have experienced the issue of the non-functional mobile OP menu on a campaign or two in the past. On my tablet, the menu wouldn't work, so I would have to go into landscape view to see the normal tabs and navigate that way - this worked well enough, but I was borked entirely on my cell phone.

    As I recall, the issue was because the CSS changes that had been made (which were numerous) didn't have any corresponding @media style settings to be used with the smaller screen size breakpoints. I don't remember the specifics on the changes to fix, but hopefully this at least points you in the right direction. I'll try to see if I can find the material again.

    All the best,
    - Kallak
Sign In or Register to comment.

December 2021
“Le Sang versé d’Occitanie” (The Spilled Blood of Occitania)

Read the feature post on the blog
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