4 replies to this topic

[purple]

I am wanting to create a nav bar in Pagelines that looks like the one on this site:

Please Login or Register to see this Hidden Content

Any ideas in how I can do that with Pagelines? I know it will require some custom css. Thanks in advance for your help.

[Rob]

Use a grey background similar to the one on that site, a transparent background branding image (logo) and increase the font size using CSS for the menu. Use Firebug (

Please Login or Register to see this Hidden Content

) with Firefox to identify your CSS elements to change. That will do it. Shouldn't take you more than 15 minutes, including creating your menu.

[purple]

@rangelone thanks for your response. I guess I should have clarified a bit more. Sorry. I was hoping to find out how to make the hover effect that was on the above website's nav bar. Thanks in advance for your help.

[catrina]

It's possible to create the hover effect using CSS, but first you need a rounded corner graphic (in the dimensions that you need for your menu items) that you can use as the hover background. You can use Firebug to inspect your site for the selectors you need to change those menu items, but the CSS you'll need should look something like this:

Please Login or Register to see this Hidden Content

For further reference on using the background image attribute, please see here:

Please Login or Register to see this Hidden Content

[purple]

It worked! Thanks @catrina! I did notice that I needed to make each image specific to the size of the menu item and adjust the padding so that the whole image would show. For anyone else reading this and needing to do the same hover technique here is the code adjustment I made (for better or for worse):

Please Login or Register to see this Hidden Content