Making menu like website

[fraser7]

I want to make my forum's (globalthemeparkmedia.boards.net) navigation menu like this: 

so that it matches our website (globalthemeparkmedia.wixsite.com/gtpm) but have no idea how.
If anyone could help me out, it would be much appreciated.
Thanks,
Fraser

[fraser7]

Anyone? Is this in the wrong board or something?

[Tumbleweed]

Jul 9, 2017 5:08:07 GMT -8 fraser7 said:

Anyone? Is this in the wrong board or something?

No, this is fine (right board). We volunteers can get busy and have limited time while the administrators (red names) stay pretty much in support although do come here too on occasion but they are super busy too.

I had a bit of difficulty determining the exact color and transparency used on your main web page but you can take a look here:

proboardcolors.proboards.com/

I also don't know what font they used and I suck at recognizing fonts but I put in what was in the body of that site.
Here is the css and I just have this at the bottom of my style sheet:




#navigation-menu{padding-bottom:3px;background-image:none;
background-color:transparent;}
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { text-transform: uppercase!important; float: left;text-align:center;}
#navigation-menu > ul li a {
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
width: 114px;
height: 60px;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
transition: ease 1s;
}
#navigation-menu > ul li a:visited{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
width: 114px;
height: 60px;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
}
#navigation-menu > ul li a:hover{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5);
text-transform: uppercase!important;
padding:12px 0px 0px 0px;  
}
#navigation-menu > ul li a.state-active{  
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5);
width: 114px;
height: 60px;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
}  


You may have to play with the colors of the background and transparency but I got them pretty close, but not quite perfect.

Just in case you don't know the first color is red/cyan, second is green/magenta,third is is blue/yellow and the last is the transparency.
A lower number for example in the red would make it more cyan or less red. 0.9 in the transparency control would be nearly opaque and 0.1 would be nearly transparent.

Hope this does the trick for you. I do see you got a little ways with the transparent whitish background color.

[fraser7]

I'll add this to the site and see how it looks, thanks a lot

[fraser7]

This is great, but how can i centre the text vertically? Also is there a way to put the logo before the menu, like in the screenshot on post 1?

[Tumbleweed]

Jul 11, 2017 3:02:55 GMT -8 fraser7 said:

This is great, but how can i centre the text vertically? Also is there a way to put the logo before the menu, like in the screenshot on post 1?

Looks like you totally have your welcome login stuff  that is typically on the right of the menu buttons moved/gone so you should be able to to just float the menu right. However, I don't know if you removed a lot of the things typically in the menu or not but with login and register added to your menu buttons, not sure it will all fit on that line for members that are logged in. (You could always have one menu button with a drop down like on your main site.  But anyway, head to your forum wrapper template...
(Admin > Themes> Layout Templates>Forum Wrapper)... and find your banner area located at about line 16. You'll see this:

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>


What you need to do is move the bolded closing </h2> and </div> so it is right above you closing header tag. </header>

So you'll move it down to approximately line 50 (it could be higher up or lower, depending what all you did in your template). So that area is going to look like this:

</div>
</h2>
</div>
</header>

Lastly, add this...  <p style="clear:both;"></p>  .... right above your closing </header> tag so now it looks like this:

</div>
</h2>
</div>
<p style="clear:both;"></p>
</header>

Save that and then head to your style sheet and find this id: #navigation-menu (right at the very top of what I gave you) Add float right to it and you may have to set a margin top to adjust the menu so it is centered next to your logo. So that line of css will look like this: (Adjust the 10px to get it vertically centered)

#navigation-menu{padding-bottom:3px;background-image:none;
background-color:transparent;float:right; margin-top:10px;}

And that should put the logo on the left side of your menu bar.

___________


To fix the centering find the id #navigation-menu > ul li a in the css I gave you and then change the padding I have there and you may have to decrease the height by the same number of padding pixels you added to get the text centered.

So the things you want to fiddle with are in blue and bolded:

#navigation-menu > ul li a {
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
width: 114px;
height: 60px;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
transition: ease 1s;
}

Also I was in a hurry to give you the menu css and I forgot to remove the width, height and padding in the other id's (other than the one I posted above) so these...

#navigation-menu > ul li a:visited
#navigation-menu > ul li a:hover
#navigation-menu > ul li a.state-active

.....could have that removed, although you don't have to: (It's just redundant.)

Here is a copy of all the css changes I mentioned:

SPOILER: Click to show

/*menu bar customized*/
#navigation-menu{padding-bottom:3px;background-image:none;
background-color:transparent;float:right;margin-top:10px;}
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { text-transform: uppercase!important; float: left;text-align:center;}
#navigation-menu > ul li a {
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
width: 114px;
height: 60px;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
transition: ease 1s;
}
#navigation-menu > ul li a:visited{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
text-transform: uppercase!important;
}
#navigation-menu > ul li a:hover{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5);
text-transform: uppercase!important;

}
#navigation-menu > ul li a.state-active{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5)!important;
text-transform: uppercase!important;
}

Hopefully, I didn't forget anything.

[fraser7]

Okay, i did this and it worked brilliantly, except the forum is now full width of the page...

[Tumbleweed]

Jul 11, 2017 11:45:02 GMT -8 fraser7 said:

Okay, i did this and it worked brilliantly, except the forum is now full width of the page...

I'm looking through your coding, via inspect element and it looks like you have the wrapper closed right after the header part. Look in the template and see if you see a div right after it. What I'm seeing is this:


</div>
</h2></div>
</header>

</div>

Try removing that and see what happens or just comment it out so it doesn't render by your browser:

<!--</div>-->


That closing div should be near the bottom of the wrapper template right below the $[footer].

If you see that closing </div>, click on it and then scroll up and the matching opening div should be highlighted. If it is indeed closing the wrapper div the you need to remove it and then make sure it is after the $[footer] way nearly at the bottom. 

[fraser7]

Brilliant, thanks for all your help

[Tumbleweed]

Jul 12, 2017 4:08:06 GMT -8 fraser7 said:

Brilliant, thanks for all your help

You're very welcome. By the way, nice progress on your ProBoards site.  I like your icons, especially the ferris wheel one.

[fraser7]

Thanks

[fraser7]

I've noticed a slight problem with this; the menu items which I have visited before show up darker when hovered over than the ones which I haven't. I think they show up as 60% opacity instead of 30%, but in the style sheet it is 0.3 on the alpha channel. If anyone could help fix this it would be greatly appreciated.

[fraser7]

Tumbleweed, any ideas?

[Tumbleweed]

Glad you tagged me as I otherwise might have not known you posted. It's not doing that on my test site. I know that the home button is over a very dark part of the background. Could that be what you are seeing on your site and thinking it is darker? Initially, I too thought it was darker but then moved your whole menu over 100 pixels to the right via inspect element on my browser and it no longer looked different. I'm viewing in Chrome at the moment.

One thing you could do is make your background so it is more like what is on your regular site by adding background-cover to your style sheet:

body{background-size: cover;
}

That will make that dark spot a bit smaller, if that is indeed the problem. When I get a few extra minutes I'll check in other browsers in case it is a browser issue.

[fraser7]

Tumbleweed , I changed the background how you said, but it still looks darker:

Also while checking this in chrome (I'm in safari usually), I noticed that when not logged in the menu bar is in the wrong place:
If there was a way to make it in the right place without affecting placement when logged in, that'd be fantastic


EDIT: nvm i fixed the second bit myself woooo