Jump to content
Sign in to follow this  

Navigation : Custom Navigation

Recommended Posts




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');}

Share this post

Link to post
Share on other sites

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:


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

Share this post

Link to post
Share on other sites

If you're using Firebug,  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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

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  http://www.w3schools.com/css/

Former PageLines Moderator, Food Expert and Raconteur

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  

  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.

    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!