Skip to:
Content
Pages
Categories
Search
Top
Bottom

Change Menu Bar

  • Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    I am making a site using BP for someone and he wants me to shift the menu bar(which is on the header) to the left. There are several tabs so they arent all just on one row. If we moved them to the left, it would all fit.

    Can someone help?

Viewing 15 replies - 1 through 15 (of 15 total)
  • Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    There are several tabs – in unordered list #nav. Basically, this is what’s in default theme’s style.css

    `#nav {
    bottom: 0;
    list-style: none outside none;
    margin: 0;
    max-width: 95%;
    padding: 0;
    position: absolute;
    right: 15px;
    }`

    Change `right: 15px;` to `left: 15px;` You might even want to increase the height of your header area.

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    Thank you very much. Do you know of a good site/study manual that offer kinda basic html. I create all my themes with Artisteer and know some, but it seems as I go along I keep learning and need a reliable manual to call on?

    Thank you again

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    I just tried what you said and I cant even get into some of the editors options.
    This is the custom style sheet. Doesnt show nav bar?

    body {
    width: 1000px;
    background: #C5CBF7 none;

    }

    #leftSidebar {
    width: 182px;
    float: left;
    padding: 20px 5px 20px 20px;
    background: url( images/sidebar_back.gif ) top left repeat-x;
    margin-top: 1px;
    overflow: hidden;
    border-right: 1px solid #e4e4e4;
    }

    #leftSidebar .widget {
    margin-bottom: 20px;
    }

    #leftSidebar h3.widgettitle {
    background: #eaeaea;
    padding: 5px 15px;
    font-size: 12px;
    clear: left;
    margin: 10px -4px 10px -20px;
    }

    #wp-admin-bar div.padder {
    width: 1000px !important;
    }

    #content div.padder {
    float: left;
    width: 525px;
    border-left: 1px solid #e4e4e4;
    margin-right: 226px;
    border-right: 0px solid #e4e4e4;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    margin-left: -1px;
    }

    div.post div.post-content, div.comment-content {
    margin-left: 0px;

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    Clearly we have different interpretations re “shift the menu bar (which is on the header) to the left” which I find out that you meant making the horizontal menu a vertical menu on a left sidebar(?), theme? site URL?.

    Some online assistance:
    http://www.w3schools.com/xhtml/default.asp

    http://www.w3schools.com/css/default.asp

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    The menu bar which is on the header, I want to move to the left because there are several tabs there and it creates a second row because there isnt enough room. I want to move it all to the left so that it fits perfectly in one row?

    Thank you for the services and your help

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    Also, just noticed you mentioned using a custom Artisteer theme … did you install the BP Template Pack plugin and go through the integration process? Can’t give any definitive answer based on the styles you just posted above – site url?

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    Actually the theme I am using now is BP colums.

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    Ok, BPcolumns then.

    1. Save a file copy of your default.css file in the themefoldername/_inc/css folder to a safe place.

    2. Open up default.css, find #header and change `height: 100px;` to `height: 125px;`

    3. In same file, find ul#nav and
    change `right: 15px;` to `left: 15px; `
    change `max-width: 65%;` to `width: 100%`

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    I opened the folder and found the original custom css which is below and also the style.css which is after the custom. I didnt see where I could find the nav menu?

    body {
    width: 1000px;
    }

    #leftSidebar {
    width: 182px;
    float: left;
    padding: 20px 5px 20px 20px;
    background: url( images/sidebar_back.gif ) top left repeat-x;
    margin-top: 1px;
    overflow: hidden;
    border-right: 1px solid #e4e4e4;
    }

    #leftSidebar .widget {
    margin-bottom: 20px;
    }

    #leftSidebar h3.widgettitle {
    background: #eaeaea;
    padding: 5px 15px;
    font-size: 12px;
    clear: left;
    margin: 10px -4px 10px -20px;
    }

    #wp-admin-bar div.padder {
    width: 1000px !important;
    }

    #content div.padder {
    float: left;
    width: 525px;
    border-left: 1px solid #e4e4e4;
    margin-right: 226px;
    border-right: 0px solid #e4e4e4;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    margin-left: -1px;
    }

    div.post div.post-content, div.comment-content {
    margin-left: 0px;
    }

    THIS IS THE STYLE.CSS
    /*
    Theme Name: BP Columns
    Theme URI: http://buddypress.org
    Description: A 3 Column Buddypress theme.
    Version: 1.2
    Author: modemlooper
    Author URI: http://twitter.com/modemlooper
    Template: bp-default
    Tags: buddypress, three-columns
    */

    /* Inherit the default theme styles */

    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

    /* Inherit the default theme adminbar styles */

    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

    /* Custom styles */

    @import url( custom.css );

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    Open up custom.css file, then add this at the bottom :

    `#header {
    height: 160px;
    background-repeat: no-repeat;
    background-position: left;
    }

    ul#nav {
    position: absolute;
    left: 15px;
    bottom: 0;
    max-width: 1000px;
    font-size: 14px;
    height: 25px;
    overflow: hidden;
    }`

    Adjust to taste. Save and upload.

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    I have add that(code is below), but I dont see any changes.

    body {
    width: 1000px;
    background: #C5CBF7 none;

    }

    #leftSidebar {
    width: 182px;
    float: left;
    padding: 20px 5px 20px 20px;
    background: url( images/sidebar_back.gif ) top left repeat-x;
    margin-top: 1px;
    overflow: hidden;
    border-right: 1px solid #e4e4e4;
    }

    #leftSidebar .widget {
    margin-bottom: 20px;
    }

    #leftSidebar h3.widgettitle {
    background: #eaeaea;
    padding: 5px 15px;
    font-size: 12px;
    clear: left;
    margin: 10px -4px 10px -20px;
    }

    #wp-admin-bar div.padder {
    width: 1000px !important;
    }

    #content div.padder {
    float: left;
    width: 525px;
    border-left: 1px solid #e4e4e4;
    margin-right: 226px;
    border-right: 0px solid #e4e4e4;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    margin-left: -1px;
    }

    div.post div.post-content, div.comment-content {
    margin-left: 0px;

    #header {
    height: 160px;
    background-repeat: no-repeat;
    background-position: left;
    }

    ul#nav {
    position: absolute;
    left: 15px;
    bottom: 0;
    max-width: 1000px;
    font-size: 14px;
    height: 25px;
    overflow: hidden;
    }

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @JamieMM

    You seem to be having difficulty with the basics. May I suggest switching to an easier theme to customize?

    I designed BuddyLite with newbies in mind (like me!) You can get a similar look and feel as your current theme, while taking full advantage of WP3 custom menus, and a bunch of basic customization options through a simple admin panel.

    You can download it here: http://buddylite.com/buddylite-basic/

    Avatar of ARHistoryHub
    ARHistoryHub
    Participant

    @arhistoryhub

    @JamieMM

    I’m also a bit of a noob, but I’d like to recommend using the browser plug-in Firebug as a means to quickly learn css. http://getfirebug.com/

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    And the reason why the styles I gave you are not showing up is because in the block before that, there is no closing bracket after the style declarations of `div.post div.post-content, div.comment-content` whew.

    So change this
    `div.post div.post-content, div.comment-content {
    margin-left: 0px;`
    to
    `div.post div.post-content, div.comment-content {
    margin-left: 0px;
    }`

    and it’s good to go.

    Avatar of JamieMM
    JamieMM
    Member

    @jamiemm

    Thank you SIr Mercime:)

    With that little change the menu bar has moved way over, though it is out of the header. I will try to understand whats going on here but I really like that look it created

Viewing 15 replies - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.