mySpace Top Navigation Bar, Style or Hide

MySpace Top Menu Bar

This article is being updated to reflect the June 18-July 10 2008 changes. What you see is what I have so far.
Keep in mind that this area is being changed, by myspace, a lot. Keeping up with all of their changes is difficult and tedious (and possibly pointless).

If your drop down links, on the main menu, are not placing correctly, it is likely caused by an attempt to use a position:relative or position:absolute on something in the top menu/ad area structure. This WILL alter the positioning of the drop downs. They are positioned using absolute, and a calculated value. The earlier issues, related to this positioning referencing the body have been fixed, but this is still a potential issue.


Some Quick Links, for those who do not want to read everything:
Removing/Changing the Dark Blue Color Bkgd
Hide Top Menu
Style Top Area to include Ad background, Search area, Menu
Size Top Area to include Ad background, Search area, Menu
You can make it skinny (when I tested this on Sep 13 2008)

Hide Google Search and myspace Logo (does not hide shortcuts) WARNING: This may be against the rules. MySpace is not clear on this.
Change color of the link text AND drop down Arrow things in Top Menu
Change color of the drop down Arrow things in Top Menu

For an image, which shows the depth (parents) of the Top Menu Bar, please see this myspace page:
MySpace Page Showing div, table, cells and classes
I have updated the above page to show many of the new structure/classes

The page, I link to above, has been turned into a diagram, by adding style commands. I also added a color coded key to the right.

The dark Blue Color Bkgd
The dark blue (2358B8)coloring is applied at this level:
div div.profileWidth table td

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove blue behind ad/search area by Eileen</a>
<style>
.i {display:none;}
div.profileWidth table td, x.i i .i {background-color:transparent !important}
</style>

You can change transparent to the color of your choice.

The table which contains the top menu is NO LONGER in class navigationbar
It no longer has a class (they used an ID which we can not access, with code myspace will accept).

The navigation bar can now be addressed like this:
div.profileWidth table td div

Notice how many other things this potentially effects.
However, all of the other effected elements can be addressed separate, because they are all in an additional class
All the other elements (except the moot empty div), effected by the above statement, can be addressed like this:

div.profileWidth table td div.clearfix,
div.profileWidth table td div.clearfix div,
div.profileWidth table td div div

However,
visibility:hidden has been disabled for everything in the top ad/search/menu area.
display:none works sort of.
Any attempt to reverse a display:none, causes a problem with the drop down menus.
So I will use a solution which combines positioning with opacity.
This is NOT the only solution.

Code to Hide Top Menu
As of Today, July 3 2008, this code no longer works however if you scroll down a bit, you will find another solution, which did work when I tested it today.
Place this code at the bottom of the Meet, or wherever you put style blocks.

<a class=i href="xiii.us/ms/ad-search-menu">
Hide MySpace Main Menu Nav Bar</a>
<style>
div table div, .i {display:none;}
div.profileWidth div.clearfix, i i i, 
div.profileWidth div.clearfix div {display:block;}
</style>
<i class=i>END code to Hide Top Nav Bar Main Menu</i>

The below solution does work as of July 3 2008, but keep in mind that myspace may be trying to block the ability to hide this menu. Therefore expect more changes which break the various published solutions, including this one.
You can place this code at the very bottom of the to Meet section:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace Hide New Top Menu Nav Bar</a>
<style>
.i {display:none}
div.profileWidth {margin-top: -30px !important;}
div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
div.profileWidth div.clearfix, i i i, 
div.profileWidth div div {filter:none; opacity:0.9999}
div.profileWidth div.clearfix {position:relative; top:30px}
</style>
<i class=i>!!! End Code to Hide Top Menu !!!</i>

Code to Style Top Menu
If you first apply the block I have below, you will clearly see where each color/style gets set.
Then you can look at the color/style, and determine exactly what to change.
i.e. if you see PINK, and you know that everything PINK you want GREEN, change PINK to GREEN.
etc ...

You can place this code into the about me, meet, or interests section.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace style top area ad/search/menu</a>
<style>
.i {display:none}
{! color top menu !}
div.profileWidth table td, i i i.x {background-color:black !important;}
{! color search area and behind ad different than top menu !}
div.profileWidth div {background-color:pink !important}
{! color link font in top menu !}
div.profileWidth div ul li a {font-family:comic sans ms; font-size:11px; font-weight:bold; color:pink !important}
{! link hover color !}
div.profileWidth div ul li a:hover {color:hotpink !important; background-color:green !important; display:block}
{! remove shadow in google search area !}
div.profileWidth div.clearfix, .i i i {background-image:none !important;}
</style>
<i class=i>!!! End Code to Style Top Ad/Search/Menu !!!</i>

Of course, you can change the style attribute values (such as color, font size, font weight, font family) to the values of your choice.

Here is another solution which also colors the little down arrows

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change link color (text and arrows)</a>
<style>
.i {display:none;}
div.profileWidth table td ul *,
div.clearfix i i i {color:yellow !important font-family:comic sans ms !important; font-size:18px !important; font-weight:bold !important}
</style>
<i class="i">End Code to color links in top menu</i>

Code can go at the very top or very bottom of the about or meet sections.

If you want the down arrows a different color, than the text, see the code at the bottom of this article.

Size Top Menu
It is much more difficult than before to make the top menu smaller.

The below code block will make the top menu and search area narrow, to go with a skinny profile.
Place at very top of about me section:

<a class="i" href="views-under-construction.blogspot.com/2007/03/myspace-navigationbar-top-menu-style.html">
Size myspace top menu skinny code by Eileen
</a>
<a class="i">
<style>
.x.i i, .i {display:none}
{! you can alter below width !}
div.profileWidth {width:513 !important }
div.profileWidth table:first-child tr:first-child div.clearfix {position:absolute !important; margin-top:0px !important; top:0px; left:50%; margin-left:-364px}
div[id*="shortcuts"] {position:relative !important; left:-150px !important; }
div.profileWidth table:first-child tr div.clearfix {margin-top:80px !important; position:relative;}
div.profileWidth table:first-child tr div.clearfix span div.profile {position:absolute !important; top:0px !important; right:1px !important;}

div.profile {_margin-top:80px !important;}

div.profileWidth div.clearfix div.profile,
div.srchfieldlayer {position:static !important; margin-left:0px;}

div.profile div.srchfieldlayer { position:relative !important; left:-6px !important; width:200px !important;}
div.profile div.srchfieldlayer div,
input.srchTextfld {width:200px !important; _width:130px !important}

div.srchButton, 
div.srchButton div,
div.srchButton div input {width:48px !important; font-size:8px !important;}

{!do NOT use important below it will mess up search drop!}
div.profileWidth div.clearfix div div {position:static; margin-left:0px;}

div.profileWidth div.clearfix div {_position:absolute; _margin-left:-364px}

h1.mslogo {display:none !important}

</style>
end code to size menu and search areas
</a>

This code will make the menu less high. (If used with above to make it skinny, you will need to alter a value in the above code, or in FireFox, your add will overlap your search area) It works as is in IE.
You can alter the px values to suit your needs.

<a href="xiii.us/ms/ad-search-menu" class="i"> MySpace Top Menu Code by Eileen

<style>
div.profileWidth table td div ul {height:10px !important; padding-top:15px !important}
div.profileWidth table td div ul li * {font-size:6px !important; height:10px !important; line-height:10px !important}

{! below px value should be 29 minus the px height value used above !}
div.profileWidth div.clearfix {position:relative !important; top:15px !important; z-index:9 !important}
div.profileWidth {margin-top:-15px !important;}
.rail {display:none !important;}
div.profileWidth td {background-color:transparent !important;}
</style>
!! END Code to Decrease Top Menu Hight !!</a>

Shadows in Top area
The shadow you see, is caused by background images.
These are applied at various levels.
Some other things formed with background images are:
- myspace logo to the left of the google search area
- the rounded corner look of the google search bar
- the google search logo next to the google search bar.

I do remove the shadow from the google search area, in my above example.
This shadow background image is applied at this level:
div.profileWidth div.clearfix

The myspace logo background image is applied at this level:
div.ProfileWidth div.clearfix h1

The "powered by" (http://x.myspacecdn.com/modules/common/static/img/header/en-us/poweredbygoogle.png) that shows up just before the word Google (which is in a span) is applied at a level:
div.profileWidth div.clearfix form

There is also a background image used to give the search box the curved look.
This one is interesting, because it is applied at multiple levels, and the code is in a style sheet.

Look at the image, it is interesting.
http://x.myspacecdn.com/modules/common/static/img/header/searchFldBg.gif

Then see how it is applied (also interesting).
the code is found in css file
http://x.myspacecdn.com/modules/common/static/css/header/profileheader002.css

The image is applied multiple times, at multiple levels, to accomplish the effect, of keeping the image look, even if resizing the input field.

Code to remove the application of the curved edge input image, without effecting other elements:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove image border of google search input box</a>
<style>
.i, i i.x {display:none;}
div.srchfield, div.x i i .i,
div.srchfield div {background-image:none !important;}
</style>
<i class=i>!!! End Code to remove border img on google search !!!</i>

A similar image is applied to the search button
http://x.myspacecdn.com/modules/common/static/img/header/searchBtnBg.gif
Code to remove image shadow border thing:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove image border of google search button</a>
<style>
.i, i i.x {display:none;}
div.srchButton, div.x i i .i,
div.srchButton div {background-image:none !important;}
</style>
<i class=i>!!! End Code to remove border img on google search button !!!</i>

Prevent Google Search from Wrapping to Next Line and Causing Centering Issuses
Sizing and Spacing of the Google Search, Shortcut, Logo Space
This space seems to want to wrap, if it does not have enough space (even if it looks like there is plenty of space).

BEST SOLUTION is to REMOVE whatever is causing the problem
The profile sizes this space just fine, if no other code is messing with it.

The below code solved the problem with some profiles. It really depends on what is causing the problem to start with.
I used the below code to prevent the wrap, and keep the google input box reasonably sized.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace size and prevent wrap in google search</a>
<style>
.i, i i.x, .rail {display:none;}
div.profile form {position:absolute; top:10px !important; right:10px !important;}
div.srchfield input {width:190px !important;}
</style>
<i class=i>!!! End Code to size google search space !!!</i>

IF I am adjusting the top menu and google search to do a skinny profile, I can reasonably take them down to the same width as the ad banner.
I was able to get them down to under 600px, but getting the search centered in FireFox was difficult. (Margin values are set in the style sheet for the id, making it difficult to use margins to space and center. IE uses text-align, so I could center easily in IE).

The below code block takes the search and menu down to 720px width (the same as the ad banner.)
It also includes the same formatting I used in the previous code block:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace size menu and search, prevent wrap in google search</a>
<style>
.i, i i.x, .rail {display:none;}
div.profileWidth,
div.profileWidth table,
div.profileWidth table td {width:720px !important;}
div.profile form {position:absolute; top:10px !important; right:10px !important;}
div.srchfield input {width:190px !important;}
</style>
<i class=i>!!! End Code to size menu and search !!!</i>

Hide Google Search and MySpace Logo (does not hide shortcuts
If you do not know where to put this code, you can put it at the end of the Meet or Bio.

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace Hide New Top Menu Nav Bar</a>
<style>
.i {display:none}
div.profile * {display:none !important;}
</style>
<i class=i>END CODE to Hide Google Search and MySpace Logo</i>

Change color of the links (text and arrows) in the main Top Menu
This code can go anywhere you are keeping style blocks, but must go OUTSIDE any existing style block. It has its own style tags. If in doubt, put at the very TOP or very Bottom of the Meet or Bio section.

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change link color (text and arrows)</a>
<style>
.i {display:none;}
div.profileWidth table td ul *,
div.clearfix i i i {color:yellow !important}
</style>
<i class="i">End Code to color links in top menu</i>

If you want the arrows a different color, you can apply the below block
Change color of the drop down Arrow things in Top Menu
This code can go anywhere you are keeping style blocks, but must go OUTSIDE any existing style block. It has its own style tags. If in doubt, put at the very TOP or very Bottom of the Meet or Bio section.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change color of link arrows</a>
<style>
.i {display:none;}
div.profileWidth table td ul small,
div.clearfix i i i {color:green !important}
</style>
<i class=i>End Code to color link arrows in top menu</i>

More stuff on Styling this Space Later

Thank you for Visiting; Have a Nice Day :-)


-I have code to customize myspace navigation links.
-And make navigation bar transparent
-How to change color of navigation bar
-eliminate hide pipes (lines) in navigation bar
-hide blue menu bar
-myspace menu font bold

xiii.us/ms/ad-search-menu