Change Menu Bar
-
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?
-
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.
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
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;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.aspThe 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
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?
Actually the theme I am using now is BP colums.
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%`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 );
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.
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;
}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/
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/
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.
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
- The topic ‘Change Menu Bar’ is closed to new replies.
