Jump to content


Photo
- - - - -

Customizing Nav Area in Pagelines


  • Please log in to reply
4 replies to this topic

#1 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 11 April 2012 - 05:05 PM

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.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 April 2012 - 06:40 PM

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.

#3 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 01 May 2012 - 09:51 PM

@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.

#4 catrina

catrina

    Advocate

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

Posted 02 May 2012 - 02:29 AM

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



#5 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 02 May 2012 - 04:00 PM

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