Top Menu

Top Menu Code:

Guess what – it’s the top menu code. However, we’re talking about the VERY top, not the location where most blogs have their main graphical banner, or standard HTU avatar images.

#top-menu {
background:#3D3939;
border-bottom:1px solid #333;
min-height:100px;
background-repeat:no-repeat;
background-position:50% 96%;
background-image:url(‘http://hattrickunited.org/thelostsaxons/files/2014/10/axes.png’);
}

So, you can change the background colour, change the thickness and colour of the border on the top menu. The min-height value can be increased or decreased. I would recommend, that if you want a wide image to go here, that you create an image that is 1700 pixels wide. Your height is up to you, but whatever you go for e.g. 70 pixels high, you should set the min-height in the code above to the same, e.g. min-height:70px;

The background-position code is interesting. Scary for me, but interesting lol. It doesn’t really do too much except move around an image if you have one. It will shift it a little to the left or right, depending on what values you give the two percentages. I personally just leave it alone.

Finally, you have the code needed to put an image in that very top bit of the page.

Please note, that the image URL I have put in the code above is from a disused blog, so you will need to change it to the URL of the image you want to use on your own blog.

BONUS CODE

This code, provided by Eilanda (7188758), shows how you can affect the text within the top menu.

#top-menu .sf-menu .sf-with-ul {
text-decoration: line-through;
}

This code makes every link at the top menu with a scroll down menu attached to it have a line through it.

#top-menu .sf-menu a {
text-decoration: line-through;
}

This makes a line through the links without the scroll down menu attached to it.

Edit: Apparently this makes the text having a line through it no matter if the link is having the mouse hover over it or not.

Top Menu Appearance (If you have one on your blog):

This will have an effect on the links in your top menu (should you have one active on your blog). It will also effect any drop downs on this menu.

#top-menu .sf-menu .sf-with-ul {
text-decoration: line-through;
}

The code above makes every link with a drop-down menu attached to it, have a line through the text. To change this, remove line-through and write either: bold, underline, overline or none (default.)

#top-menu .sf-menu a {
text-decoration: line-through;
}

The bit of code above, on the other hand, puts lines through the top menu links even if they don’t have any drop-downs. Useful to know both bits of code, should you want to use any of the text-decoration codes. You can also add a color: command and a background-color: command to the codes above. Like this:

#top-menu .sf-menu .sf-with-ul {
text-decoration: line-through;
color: red;
background-color: black;
}
#top-menu .sf-menu a {
text-decoration: line-through;
color: red;
background-color: black;
}

About the Author

Born in England, reborn in Poland, living the dream on Hattrick. I am the creator of 'The Golden League', which if you don't yet know what it is... you aren't getting the best out of HT ;) I am also a board member of the HTU Managers Federation, which I heartily recommend to all HT users as an established, supportive and amazing community with huge resources to help you make a brilliant blog for your team, and to help your teams succeed. Hope to see you there.