MyBB Community Forums

I'm trying to replicate the menu bar on mybb.com just like above!

Here are the codes I'm putting in my global.css

#menu {
    position: absolute;
    top: 91px;
    right: 0;
    padding-left: 41px;
    background: url(images/menu_bg_start.png) no-repeat; 
    font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 34px;
    background: #016db0 url(images/menu_bg.png) repeat-x;
}

#menu li {
    float: left;
    margin-top: 4px;
    margin-right: 10px;
}

#menu li a {
    padding: 4px 10px 3px 10px;
    color: #fff;
    text-decoration: none;
    display: block;
    border-bottom: 0;
}

#menu li a:hover {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
}

#menu li.active a, #menu li.active a:hover {
    background: url(images/menu_bg_active.png) no-repeat top left; 
    color: #000;
    padding: 4px 10px 4px 13px;
    border-bottom: 2px solid #ffffff;
}

#menu li.active {
    background: url(images/menu_bg_active2.png) no-repeat top right; 
    padding-right: 4px;
    position: relative;
    bottom: -1px;
} 

But it breaks my layout..

Here is a pic of my normal layout


Here is what happens to the code when I put it in..





Any ideas to make it fit and go back to the fixed width? so It lines up good?

You can't just directly copy the code and add it in. I'd assume MyBB has made a few template edits to get it to fit the site.

Yeah I've been messing with it but can't get it anywhere close.. just for the record I'm trying to follow this guys tutorial http://yaldaram.com/thread-1113.html. I thought I would ask here first since it is mybb related

You may want to look at this -

http://yaldaram.com/thread-5105.html

top:91px;

That is telling the menu it should have a gap of 91px from the top of the screen. Your header is obviously higher than 91px. Increase that and it should work just fine. If it still doesn't then you will need to check that there are no margins affecting it from any other elements but I think that should be enough. Drop me a PM otherwise

Thanks Tindris, I was playing around and figured out that messing with the "top" moves the menu bar up and down which is awesome! The only problem I have left is that when I have the menu code on it makes my forums width go really wide.. I want it to be like in the first photo or even exactly like mybb.com Any ideas why it's "stretching" my forum width?

---

I just can't figure it out!!!!! I've literally copied mybb.com's global.css for the menu bar exactly and it still screws up my forum layout.

Considering I can't see this live I really can't help, can you provide a link?

(2012-07-14, 01:52 PM)Tindris Wrote: [ -> ]Considering I can't see this live I really can't help, can you provide a link?

its in his signature

(2012-07-14, 04:08 PM)fma965 Wrote: [ -> ]

(2012-07-14, 01:52 PM)Tindris Wrote: [ -> ]Considering I can't see this live I really can't help, can you provide a link?

its in his signature

If you looked at the link you would see that it doesn't look the same there as the problem he is describing so you can see that he isn't doing edits on his live copy

I had to revert back to my original code as I don't want a floating menu bar on my forum.. haha. You can see in the picture that my only problem is that when I add the menu bar it makes my forum way wider than I want it to be. How can I make it exactly like mybb.com where it's somehow contained?