WordPress.org

Forums

Customizr
Rearranging NavBar elements (2 posts)

  1. mikblik
    Member
    Posted 1 year ago #

    Hello,

    I am trying to rearrange the three main elements of the NavBar. While keeping the logo in the default position flushed to the left, I would like to:

    1. Align the Menu below and in the center of the NavBar, so it is centered relative to the NavBar.
    2. Align the Tagline to the left of the NavBar, so it is flush with the left edge of the NavBar.
    - currently, my one-sentence Tagline is broken over two lines. How do I keep it
    together as one line?
    3. Align Social icons to the right of the NavBar, so they are flush with the right edge of the NavBar.

    Here's my website: http://www.imuproject.org/

    I've already moved the Menu below the NavBar and removed Navbar border, shading and background. But that's where I got stuck. Here's the code that I've parsed together from other forum posts and code snippets:

    .tc-header, .navbar.notresp .navbar-inner  {
    background-color:   #319BDA;
    }
    
    /* Moves menu below NavBar  */
    .navbar .nav > li > a {
    position:     relative;
    top:          10px;
    }
    .navbar .navbar-inner {
    max-height:     20px;
    }
    
    /* Removes NavBar box and shadow  */
    .home .navbar .navbar-inner {
        box-shadow: none;
        background: none;
    }
    
    .navbar.notresp .nav > li > a {
    color: white;
    }

    Any help would be greatly appreciated!
    Mihael

  2. deputy05
    Member
    Posted 1 year ago #

    Some partial help...by the way, the site link does not work...

    2. Try this:
    h2.span7.inside.site-description { float: left; text-align: left; }
    You may also have to adjust margins, padding, etc.
    For the tagline text wrapping issue...you could change the span values of both tagline and social blocks using a custom function...I cannot help here...but if you do, you will need to change the css selectors as well...

    3. Try this:
    .social-block.span5 { float: right; text-align: right; }
    You may also have to adjust margins, padding, etc.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic