11 replies to this topic

[tandan]

Hi there, I found HTML/CSS code online (with images) for a navigation design i'd like to use. How do I implement with Pagelines? What files do I modify? The section.php for Nav? Is there someone who can show me? I'm willing to pay for a tutorial as it's something I will do often. The CSS is as follows for the blue navigation:

Please Login or Register to see this Hidden Content

The HTML is as follows:

Please Login or Register to see this Hidden Content

-- Can someone help? It seems the files are set up different with the PL framework and I"m not proficient to figure out to translate it to work... Thank you!!!

[catrina]

Can you please provide a link to your site and the link to this navigation code and CSS you found?

[tandan]

Hi Catrina! Thank you for your response! The site is just a basic staging site with Pagelines installed. Nothing setup yet. It's at:

Please Login or Register to see this Hidden Content

The menu pack was downloaded at:

Please Login or Register to see this Hidden Content

I'm just trying to figure out how to do it systematically so i can repeat with other menus that I find online. Your help is greatly appreciated.

[catrina]

If you were to use the CSS provided and apply it to the existing menu, you wouldn't have to use the menu HTML code. That way, you won't have to change the menu itself (you'd only be changing its appearance). In this case, using an inspection tool for the CSS you need would be extremely helpful. Please see this documentation on how inspection tools can help you:

Please Login or Register to see this Hidden Content

[tandan]

Hi Catrina, Thanks for the advice but I'm still a little lost. Where exactly is the existing menu live so I can figure out what the elements are? I'm using the base theme so there is nothing that helps me in the style.css file.

[catrina]

The inspection tool (Firebug for Firefox, for example) is used to figure out the elements. You don't have to look directly in the CSS file. When making changes to the CSS, you don't have to change any existing CSS. You can just add new CSS to the style.css file in base and it'll overwrite the existing CSS for the menu you have.

[tandan]

hi catrina, ok, i'll try to figure out what goes with what...as for the images, what folder should i put them in? there's no images folder in the base theme...thanks again!

[catrina]

You can upload them to the Media Library on your Dashboard (Media Library > Add New) and use the full image URLs for the images in the CSS as needed.

[tandan]

awesome!!! thanks so much!!! god, this makes a HUGE difference for customization possibilities for me! you can see it here:

Please Login or Register to see this Hidden Content

however, for some reason the animation is a bit different for hover and non-hover states as well as the active page (that is gray for some reason...not sure how to target that element)...do you have any idea why? i when you hover it's supposed to look like it gets pressed but not into the orange border below. i didn't change any of the CSS except for the selector so i'm not sure why.... thank you sooo much for your help--you're awesome!

[Rob]

There's probably a selector missing or, an image not being applied correctly, perhaps its size or application. I notice that if you click the Sample Page item, it doesn't stay grey if you hover over it. That may be the desired effect. I don't know what the original source does. Could you provide a link?

[tandan]

hi rangelone, i don't have a link to the original source code...The menu pack was downloaded at:

Please Login or Register to see this Hidden Content

but there's a preview there if you could take a look...thanks so much!

[Rob]

Unfortunately there's no preview there and I can't test 3rd party menus for you. How did you edit the menu to get that effect? CSS? If so, please copy it and paste it here. If it was something else, let us know how you did that so we can figure this out with you. Thanks.