Moving the Nav under the Banner

wbTigress
wbTigress

I'm just starting out using the CSS system, and have been playing around with everyone's tutorials and such here on OP (thank you so much by the way!)  I was wondering how (if even possible) I could move the nav-bar to a horizontal row right below my banner as icons.

Comments

  • cgregory
    cgregory
    Posts: 780

    Shouldn't be to hard. We can use CSS to manipulate the original navbar. Try changing the width of the nav-row to 100% from 16.66% and add a bottom padding. Then change the list from vertical to horizontal.

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

    width: 100%;

    padding-bottom: 1em;

    }

    .campaign-public-layout #campaign-nav li{

    float: left;

    }

    That will give you something like the following.

    https://dead-men-tell-no-tales.obsidianportal.com/

     

    Using an inspector that comes with most browsers (i use firefox and the firebug addon) really helps in fooling around with the CSS. You can see where the CSS is applied in the original site and what elements you need to change.

     

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited October 2016

    Noticed you asked for just the icons.

    span.nav-text {

    font-size:0px;

    }

    Just make the span.nav-text font size equal to 0 to get rid of the text

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited October 2016

    Now that takes gives you some idea of how to work with the public nav-bar, but you also have the non public navbar that is in the dashboard, the forum, the calendar and the settings. It is still basically the same idea just some slight differences. So something along these lines will work.

    .campaign-dashboard-layout #dashboard-main-nav{

    display: block;

    width: 100%;

    position: relative;

    }

    .campaign-dashboard-layout #dashboard-main-nav ul li {

        display: block;

        float: left;

        width: 100px;

    }

    You'll obviously want to play around with this a bit, because I didn't try and make it pretty. I just threw together the basics of it.

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • wbTigress
    wbTigress
    Posts: 2

    Thank you so much!!! Worked perfectly!

Sign In or Register to comment.

March 2024
Wrath of the Highborn

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