Changing the Vertical Nav Bar to a Horizontal Nav Bar

AZ_RUNE
AZ_RUNE
edited November 2013 in General Archive
"W3Schools":http://www.w3schools.com/
"Try It":http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float
I have looked here to no avail.

"Rise of Asmodeus":https://greyhawk-636-cy-the-rise-of-asmodeus.obsidianportal.com/wikis/rise-of-asmodeus-reforged-css
I have tried code from this site as well, but I feel some other element(s) currently in play is affecting this.

"Gray Wallpaper":https://db4sgowjqfwig.cloudfront.net/assets/255554/grey-nav1.jpg
I just want to change the nave bar from Vertical to Horizontal with the gray background above.

I need this to be done in CSS as opposed to hard coded in the HTML. This will make future changes a breeze, lol!!!

This is my site: "REGNUM":https://regnum.obsidianportal.com

Thank you kind soul that helps take pity on the frustrated.
AZ_Rune

Comments

  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Sorry, Az_Rune! I must've missed something when I copied the code over for the RoA page. Give this a try:
    @/*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:100%;
    position:relative;
    }
    /*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:100%;
    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;}@
    Post edited by madartiste on
  • killervp
    killervp
    Posts: 2,733
    Awesome Madartiste! Thanks!
    My quandary is that I have already edited over 600 pages with a traditional html nav bar.... don't think I am going back, but next time they make a major update I will.

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    Killervp, you're welcome. :) If I remember correctly, you've got links that go to places that the normal nav bar doesn't link to, right? In which case, those custom nav bars you made are pretty much the only way to do it anyway.
  • AZ_RUNE
    AZ_RUNE
    Posts: 43
    :: BOWS :: " Oh num shubai! "

    You'd have to be an Indiana Jones fan to get the reference. Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    " !!! " Just in case the other ones above were not clear how much I appreciate your help.

    /Change Link Names/
    /remove current text/
    #campaign-nav .adventure-log .nav-text {font-size:0;}
    #campaign-nav .wiki .nav-text {font-size:0;}
    #campaign-nav .characters .nav-text {font-size:0;}


    /add new text/
    #campaign-nav .adventure-log a:after {content:“Adventure Tales”;}
    #campaign-nav .wiki a:after {content:“Watch Reports”;}
    #campaign-nav .characters a:after {content:“Heroes & Villains”;}

    I tested this and it did not change the text, so I am wondering if I just remove it all and then use this code to use images?
    /NAVIGATION BAR/

    /Change Height of Links/
    .campaign-public-layout #campaign-nav li a {
    height:68px;
    }

    /Remove Link Text and Add Image/
    #campaign-nav .dashboard a {
    font-size: 0;
    width: 132px;
    height: 68px;
    background-image: url(http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .front-page a {
    font-size: 0;
    width: 81px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .forum a {
    font-size: 0;
    width: 80px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .calendar a {
    font-size: 0;
    width: 114px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .adventure-log a {
    font-size: 0;
    width: 125px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .wiki a {
    font-size: 0;
    width: 59px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .characters a {
    display: block;
    font-size: 0;
    width: 137px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .items a {
    display: block;
    font-size: 0;
    width: 74px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .maps a {
    display: block;
    font-size: 0;
    width: 76px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    #campaign-nav .settings a {
    display: block;
    font-size: 0;
    width: 102px;
    height: 68px;
    background-image: url(http://http://Your.URL/Image.jpg);
    background-repeat:no-repeat;
    }

    /Change Nav Bar Dimensions/
    #campaign-nav {
    height:90px;
    position:relative;
    }

    /Remove Background Color from Nav Bar/
    .campaign-public-layout #campaign-nav {
    background-color:transparent;
    }

    /Add Background To Nav Bar/

    .collapsable-nav-row {
    position:relative;
    top:-20px;
    }

    .collapsable-nav-row .front-nav-container {
    width:100%;
    background-image:url(http://db4sgowjqfwig.cloudfront.net/assets/254249/navbarbottom.png);
    background-repeat:no-repeat;
    top:-10px;
    left:15px;}

    Thanks,
    Brian

    P.S. I somehow screwed up my right side bar and the large the screen it is fixed in the center somehow?
  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Az_Rune, I think the problem might be that when you copied the text from the forums, it actually changes the formatting. The quote marks are the wrong kind. I've run into it before. Try this, though:

    @/*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:100%;
    position:relative;
    }
    /*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:100%;
    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;}
    /*CHANGE LINK NAMES*/
    /*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:100%;
    position:relative;
    }
    /*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:100%;
    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;}
    /*Change Link Names*/
    /*remove current text*/
    #campaign-nav .adventure-log .nav-text {font-size:0;}
    #campaign-nav .wiki .nav-text {font-size:0;}
    #campaign-nav .characters .nav-text {font-size:0;}
    /*add new text*/
    #campaign-nav .adventure-log a:after {content:"Adventure Tales";}
    #campaign-nav .wiki a:after {content:"Watch Reports";}
    #campaign-nav .characters a:after {content:"Heroes & Villains";}@

    In the future, when you copy stuff from the forum, make sure you use CTRL+SHIFT+V in Firefox or Chrome to paste without the formatting. Or right click and choose "Paste as plain text" in chrome. The code I pasted above that's in the yellow border should be safe to copy and paste as normal, though.

    Your sidebar looks like you used the code that someone else posted (Was it Langy? I'll have to look it up) elsewhere. Your sidebar isn't gone, but it's hidden until you mouseover the right spot.
    Post edited by madartiste on
  • Langy
    Langy
    Posts: 364
    Yeah, that's my variant of the sidebar. I like the hidey-holiness of it:)
  • NikMak
    NikMak
    Posts: 379
    Hi Madartiste - I have tried this, but it still stacks vertically instead of horizontally - the name changes are in place correctly so i assume that it is not a copy & paste error on the punctuation. any suggestions as to why it not tracking across horizontally?
  • madartiste
    madartiste
    Posts: 328
    NikMak, make sure you don't have the collapse front page menu box checked in the Style section of your campaign settings. That causes it to not work. If that's not it, could you post a link to your campaign so we can take a quick look at the code?
  • NikMak
    NikMak
    Posts: 379
    aha! you are wise and solve my problem easily, many thanks :)
  • madartiste
    madartiste
    Posts: 328
    Glad I could help. :)
  • Leonidas300
    Leonidas300
    Posts: 262
    @ madartiste - once again I must humbly leech off your knowledge.

    I have used the code you provided above and I think once I can square away what a good space setting will be for me I'll like it better than the side nav.

    The real question is can you add slots to this or are you stuck with 10?

    Thanks,

    Leonidas300
  • madartiste
    madartiste
    Posts: 328
    Leonidas, by add slots do you mean add more links? Because the answer would be no. CSS cannot really add new elements to a page in that manner as far as I'm aware. You can't really change their targets either -- meaning you can't make the characters link go to a wiki page for example.
  • Leonidas300
    Leonidas300
    Posts: 262
    @ madartiste - Yes I did mean add more links - thanks for letting me know and for all the code I've "borrowed" from you.
  • madartiste
    madartiste
    Posts: 328
    Hey, no prob. Always glad to help. :)
  • Keryth987
    Keryth987
    Posts: 785
    Don;t we all borrow code from each other?

    I know I've done my fair share of acquiring code from Madartiste, KillerVP, PhoenixMark, and especially Wolfhound

    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/
  • madartiste
    madartiste
    Posts: 328
    Indeed, Keryth, I've borrowed plenty myself! It's all good as far as I'm concerned.
  • twiggyleaf
    twiggyleaf
    Posts: 1,599
    Here here! There There! Share Share and Share Alike!

    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

  • saethone
    saethone
    Posts: 153 edited January 2015
    I don't think ive ever encountered someone who was upset about borrowing code / graphics on this site. It's pretty nice :)

    Theophagie: https://theophagie.obsidianportal.com/ - Houseruled D&D 3.5 in

    Alternate History Earth
    Zeroed: https://zeroed.obsidianportal.com/ - GURPS Cyberpunk-Sci-Fantasy
    Post edited by saethone on
  • AZ_RUNE
    AZ_RUNE
    Posts: 43
    This site... no this community has been great about sharing and I have always tried to help when asked. My inbox is always open. :-)

    AZ_RUNE
Sign In or Register to comment.