Wiki navigation bar creation - formatting question

UselessTriviaMan
UselessTriviaMan
edited January 2016 in Campaign Portal Building
Hey there Vanguard Portalions,

My "campaign site":https://ptolus-city-by-the-spire-by-bryan.obsidianportal.com has gotten big enough that I think I need a quick navigation bar. I modified "killervp's excellent nav bar CSS":https://a-god-rebuilt.obsidianportal.com/wikis/nav-bar-code to suit my own campaign site, but I've encountered a snag ("example here":https://ptolus-city-by-the-spire-by-bryan.obsidianportal.com/wikis/magic-of-ptolus).

It looks okay on my desktop, but when viewing from my phone the nav bar is all wonky. Is there any way to get the buttons to adjust to auto-fit to the screen size? Or possibly get the nav bar to center itself horizontally on the page? I'm learning, but don't yet know all the proper code.

Ptolus, City by the Spire - 2016 Campaign of the Year

"Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

Comments

  • Basileus
    Basileus
    Posts: 589 edited January 2016
    The way you are using it, you probably don't need the "margin-left" and "position" properties. Remove those and replace with:

    @text-align: center; max-width: 100%;@

    Should make the navbar take up no more than the width of its parent (the content area), and always center the buttons. If the screen is too small to fit the whole navbar on one line, it will split the buttons between two (or more) lines (because its just a normal div).

    EDIT: Looks like you might not even need the max-width property, but it doesn't hurt.
    Post edited by Basileus on
  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531
    Excellent. I knew it would be something simple, but didn't know the syntax for the @text-align: [email protected]

    Thanks, Basileus!

    (It still doesn't completely work on my mobile device, but all buttons are at least visible and selectable. I'll take it.)

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Basileus
    Basileus
    Posts: 589
    What mobile browser are you using? (Safari on iPhone, Chrome on Android, something more obscure...)

    When you update the test page, let me know and I'll take a look and see if I can't figure out whats not working. (maybe post a screenshot of what you see, if you have the time)
  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531
    I'm using Chrome on Android. I can check it on my wife's iPhone later tonight.

    Here's what I see:

    !http://img.photobucket.com/albums/v310/UselessTriviaMan/Screenshot_zps8eqh7guc.png!

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Basileus
    Basileus
    Posts: 589
    Hmm, in the realm of theorycrafting at the moment, but maybe try adding:

    @display: block;@

    A div should be a block element by default anyway, but it looks like its ignoring the max-width property (make sure that's in there as well), which might happen in Chrome if its not a block element.
  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531
    Got it. I just had to remove a few unneeded (for me) commands.

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,908
    My Nav bar does not look good on mobile, and I did not care.... sorry about that...

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

    image

     

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531
    Dude, absolutely no worries about that. It's a great tool, and really well done.

    I wouldn't be concerned about it either, but almost all of my players can access our OP campaign site on their phones while at the gaming table. I want it to be at least functional for them on the smaller screen.

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Keryth987
    Keryth987
    Posts: 939
    Looks fine on my ipad, KillerVP

    I'm fairly certain my navbar looks like crap on my iphone


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • twiggyleaf
    twiggyleaf
    Posts: 1,792
    Hi There

    Can anybody remember how to bring back the ITEMS WIKI into the left navigation bar. After the reforge, it went to HIDDEN as default and I remember there was a quick fix to introduce it back into a campaign, but I cannot for the life of me find it. PLEASE HELP IF YOU REMEMBER. I can't find the link that mentioned how to do it.

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531 edited February 2016
    If you go into the *Settings>Advanced Settings* screen for your campaign, is there a check box displayed that you can un-check?
    Post edited by UselessTriviaMan on

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • twiggyleaf
    twiggyleaf
    Posts: 1,792
    Thanks UTM

    I have just found it.
    For anybody else that wants to add the ITEMS category to the Left Navigation Bar, go to Settings>Advanced Settings and there IS a check box to tick (Show Items Setting)

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 531
    Cool. I knew there was a checkbox for if you want to make it go away (I don't), but wasn't 100% certain it was still there if you had already made the Items section vanish.

    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • twiggyleaf
    twiggyleaf
    Posts: 1,792
    By default it is switched off at the beginning of the campaign. It also has "not recommended" in brackets, although I don't know why it would say that.

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Basileus
    Basileus
    Posts: 589
    They declared that they weren't going to ever update that feature again (Items page), but they didn't want to remove it for anyone who was already using it). So they declared it "Not Recommended" and made it optional.
  • twiggyleaf
    twiggyleaf
    Posts: 1,792
    Well, I use it and like it. Call me KRAYZEE!

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,908
    Ok, You KRAYZEE

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

    image

     

  • Maesenko
    Maesenko
    Posts: 325
    I'm KRAYZEE too. I still feel it is worth using and updating, but I can see both sides (as a Wiki page vs. as an Item page).

    As Always,
    _~Mae_

    ~Mae

    CotM Selection Committee

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


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