How to - add a mixed menu of images, text and static img

[cclambie 0]

Hi there PL, I have platform pro. I would like to put a menu across the top that looks like the attached template - I am close, but just need some guidance on what tools to use to do this. See http://squeakywheel.whatwasthat.com.au/ for the temp site url. Thanks C

[Kate 3]

Is there a part in particular you need help with?

[cclambie 0]

Hi Kate, As you can see on the URL I have tried to put the menu at the top a bit similar to the drawing, but I haven't succeeded, so yes, I need to replicate the menu across the top with the static image.

[cmunns 16]

In this case you will want to just create your own custom navigation. If I were you I would create two separate menus that can be separated by the middle image...in the menus admin of WP you can also apply classes to each item which you should use for adding image.s

[cclambie 0]

Hi Adam, Thanks for your help. I am getting closer, the upgrade to PageLines theme helped too, another widget area to add, which I am using. Issue is now all CSS fun. Any suggestions on how to fix it? I have tried using "background-image" on the a, ul and li, but I can't seem to get it to show up? Thoughts? Thanks again.

[catrina 103]

Can you paste the code you've tried so that we can figure out how it can be fixed?

[cclambie 0]

Hi Catrina, CSS is publicly accessible information, so that is why I haven't posted any "code" I use Google Chrome, and it has a great CSS function when you "inspect element" similar to Firefox's Firebug "inspect element" function I have used in the past. Therefore I won't post any code, it is on the site at http://squeakywheel.whatwasthat.com.au/ I have tried a few things, I have even tried duplicating the CSS rules/situation that is around the "main nav" which I have put back on the page to try to make this work. Not had any luck. Some CSS star out there that can help? Adam - still no idea how to use the menu class as you suggested to put a background image into play here (I assume we would use the background-image class) eg, as per the page: #menu-item-86 a { background-image: http://squeakywheel.whatwasthat.com.au/wp-content/uploads/2011/06/twitter.png; }

[catrina 103]

This is the correct CSS:

#menu-item-86 a {
	background-image: url(http://squeakywheel.whatwasthat.com.au/wp-content/uploads/2011/06/twitter.png;)} 

[cclambie 0]

Hi Catrina, Thanks for the tip. damn CSS is the pain in my arse! I am no designer I am a coder! Anyway - that is great news, except a couple of things. I now am not sure how I should make the text disappear, I have tried making it the same as the background colour, but of course it makes the background image discolour. I have tried removing the text, but this actually removes the menu item from the menu. So. 1. How do I remove make the image only appear? and 2. How do I make the items appear across the page, like the menu? I don't understand why this isn't an option in Pagelines. To be honest I thought it was way more "drag and drop" than this - I was expecting it to be easy as (so I could concentrate on function, instead of design) Let me know please, your help is greatly appreciated

[catrina 103]

I now am not sure how I should make the text disappear, I have tried making it the same as the background colour, but of course it makes the background image discolour.

Which text are you talking about specifically? It might be possible to hide it using CSS.

[cclambie 0]

Hi Catrina, To be honest at this stage I am far more interested in making it a horizontal menu than this, but take a look at this screen shot of the site (which is public) to see what I mean http://screencast.com/t/mdCoJZPPn Thoughts?

[catrina 103]

Ah, I see. You can add this CSS to make the text disappear:

ul.menu ul#menu-rhs-menu li#menu-item li.menu-item {color: transparent;}

[cclambie 0]

Hi Catrina - thanks for the tip, I must of been spelling transparent wrong or something, as I had tried this. I did a variation on this, so that it only applied to the menu items I required. Now just to make the menu a horizontal menu instead of a vertical one and I think we have completed Adams suggestion - which he assumed was easy (as did I) Thoughts?

[kastelic 6]

#sidebar_universal .widget ul li{display:inline}

should get you started, but then you have all these full width elements in there that need to be set as block level elements if needed and set a width on them. Then you will probably have to float each of your three sections in order to get them to line up on one line.

[cclambie 0]

Hi Jimmy, Thanks for this tip, sounds great. Not sure what a block level element is, can you explain. I have managed to get them all on the same line kinda of, def in a horizontal. I am floating left, right and trying to center the middle img is my biggest issue I think. They are all in tags, so I am using these as IDs.

	nav_menu-4 {
		display:inline;
		float:left;
		text-align:center;
	}
	#text-4 {
		display:inline;
		text-align:center;
	}
	#nav_menu-3 {
		display:inline;
		float:right;
		text-align:center;
	}
	

Thoughts? C

[kastelic 6]

Okay, try this: #text-4{ display:inline-block; width:500px; } #sideber_universal ul.sidebar_widgets {padding-top:27px}