• 0
Sign in to follow this  
Followers 0

Customizing Nav Area in Pagelines

Question

Posted · Report post

I am wanting to create a nav bar in Pagelines that looks like the one on this site: http://www.romneypestcontrol.com/index.php Any ideas in how I can do that with Pagelines? I know it will require some custom css. Thanks in advance for your help.

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

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 (http://www.getfirebug.com) 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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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: [code]li.menu-item a:hover {background-image: url('http://DIRECTIMAGEURLFORGRAPHIC'); background-repeat: no-repeat;}[/code] For further reference on using the background image attribute, please see here: http://w3schools.com/css/css_background.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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): [code]li.menu-item-43 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-42 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-44 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;} .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; } li.menu-item a:hover {list-style-type:none; margin:0; padding:20; padding-top:15px; padding-bottom:30px; }[/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0