Jump to content


Photo
- - - - -

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


  • Please log in to reply
15 replies to this topic

#1 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 06 July 2011 - 10:50 AM

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

Please Login or Register to see this Hidden Content

for the temp site url.
Posted Image
Thanks
C

#2 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 06 July 2011 - 02:17 PM

Is there a part in particular you need help with?

#3 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 06 July 2011 - 04:50 PM

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.

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 06 July 2011 - 07:30 PM

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

#5 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 09 July 2011 - 10:12 AM

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.

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 July 2011 - 04:09 PM

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

#7 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 11 July 2011 - 06:23 PM

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

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

}

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 12 July 2011 - 02:29 AM

This is the correct CSS:

Please Login or Register to see this Hidden Content



#9 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 14 July 2011 - 07:15 PM

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 :)

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 July 2011 - 02:28 AM

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.

#11 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 15 July 2011 - 05:18 AM

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

Please Login or Register to see this Hidden Content

Thoughts?

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 July 2011 - 03:22 PM

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

Please Login or Register to see this Hidden Content



#13 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 15 July 2011 - 08:19 PM

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?

#14 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 16 July 2011 - 12:01 AM

Please Login or Register to see this Hidden Content


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.

#15 cclambie

cclambie

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 16 July 2011 - 08:44 PM

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.

    Please Login or Register to see this Hidden Content


    Thoughts?

    C


    #16 kastelic

    kastelic

      Advocate

    • Members

    • 3081 posts
    • Country: Country Flag

    Posted 16 July 2011 - 10:43 PM

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