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 */
}
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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
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!
XCom: Defiance - Campaign of the Month November 2016
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.
Jason Vey
Nocturnum: Rebirth - Unisystem - Campaign of the Month, March 2017
Machinations of the Slave Lords - D&D 5
@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.
- Kallak