Jump to content
Sign in to follow this  
cryptoking

Double lined main menu or image replacement

Recommended Posts

cryptoking

Hi, First of all, love the WH theme's flexibility and ease of use. I want to customize the main top menu so that it will display stacked text instead of one super long single line. Here's a mock-up of what I'm trying to achieve. Mf5Kz.png I don't mind if it's even a graphic but I'd rather have it as text and just customizing the css. If you could give me some foresight and direction, hopefully I'll be able to figure out the rest. If the css doesn't end up working, how should I approach the graphical menu method? thanks in advance.

Share this post


Link to post
Share on other sites
cryptoking

may have figured it out but still have a ? In the style.css / line 93 add a

WIDTH:120px;

and this will force the line to drop down. The problem is that menu items with short names will be in the same width. Giving way too much space for this single item. Is there a way to set a minimum and maximum width? or something to that effect. thanks again.

Share this post


Link to post
Share on other sites
cryptoking

I suppose I'm just giving myself and whoever reads this support. It's feels good to figure things out. I made a mistake above, it's line 193 in the style.css, below is the code. I added the min-width and max-width. Which seems to work like a charm. Hope this helps anyone who wants to customize the menu.

#nav ul li a{
				background:url(images/nav_divider.png) no-repeat left 50%;
				line-height: .9em;
				padding: 13px 13px 11px;
				text-decoration: none;
				color: #fff;
				display: block;
				min-width:40px;
				max-width:120px;
			}

Share this post


Link to post
Share on other sites
bryan-hadaway

And we very much appreciate you sharing your solution. Thanks, Bryan

Share this post


Link to post
Share on other sites
cryptoking

For those new to css, you may want to modify the code above to have a perfect fit for your site. Like changing the min-width or max width pixel dimensions, as well as adjusting the padding and line height if you so desire. Hope this helps. ~a

Share this post


Link to post
Share on other sites
cryptoking

OK. I was having some issues with the 120px width, which wasn't really working. To achieved the menu like the mock-up above, I had to change the width to 100%. Actually I don't even think you need min-max width, just

width: 100%;
. This doesn't solve the problem automatically. Your menu text will stretch on one line only. Here's the fix... In the PAGES titles, you add a line break
br/
where I want the carriage return in the TITLE. Here's a screen shot. tHE8O.png Final result... EPD4n.png Only downfall is the break
br/

will also apply to page titles on the actual page, but definitely worth it. ~a

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×