Jump to content


Photo
- - - - -

Navigation : Custom Navigation

navbar navigation

  • Please log in to reply
4 replies to this topic

#1 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 06 January 2013 - 02:50 PM

Hi,

 

I am looking for some code that will enable me to just have simple text navigation, on a background that i choose. So for example using the navbar option but only have text no pre defined black box, but then i can add my own custom background using CSS... there must be a way, i just need to know the right method so i can implement my css.

 

I have this so far:

 

#site .navbar .navline li a { color: #54CACA; }
#site .navbar .navline li a:hover { text-decoration: underline; }
#site .navbar .navline .background { url('/wp/wp-content/uploads/2012/12/footer.png');}



#2 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 06 January 2013 - 03:53 PM

Update, i have managed to do this with the Nav Classic, but i would like to know the code for the tab, i.e the tab is a grey square, i would like to either remove this or, change this to a black rounded square.

 

Code us thus far:

 

#nav
{
border-style:solid;border-color:#000000 #000000;
box-shadow: 2px 2px 2px #888888;
background: url('/wp/wp-content/uploads/2012/12/header7.jpg');
}
 



#3 Rob

Rob

    One Smart Egg

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

Posted 06 January 2013 - 04:08 PM

If you're using

Please Login or Register to see this Hidden Content

,  under the Style tab, you'll see options for Active, Hover and Focus.  Check those three.  Click the menu element and the CSS applied when in any of those states will display in the sandbox.  You can adjust accordingly, testing to see if it works, then copy to Dashboard > PageLines > Site Options > Custom Code > CSS Rules.



#4 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 06 January 2013 - 04:44 PM

i dont have firebug..



#5 Rob

Rob

    One Smart Egg

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

Posted 06 January 2013 - 07:00 PM

I provided a link above. It's free.  Works with Firefox browser.

 

Firebug or Chrome's Inspection Tools (a built in component of the Chrome browser) is a critically important part of any site development today.  I strongly recommend you obtain Firebug and use it to learn the structure and code behind your site, if you're going to modify things. 

 

PageLines works brilliantly right out of the box to create unique websites.  However, customizations require some ability to change CSS code.  If you're not familiar with this, Firebug is one of the best tools.

 

We also recommend as a learning resource 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: navbar, navigation