Archived

This topic is now archived and is closed to further replies.

  • 0

NavBar design help...

Question

Posted · Report post

Hello everyone!

 

I start by saying that I love pagelines! Wahoo!

 

My question is this...

 

I would like to put a line or a dashed line above the nav bar and one below the nav bar.  So, instead of having the typical black bar or having nothing, I would like to have a line on top and a line on bottom.  Can someone help me with this?

 

Here is the URL: http://www.vueworiginals.com/lemondl/

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi there, we're stoked you're enjoying Pagelines :-)

 

For any changes outside of the Pagelines settings you'll need to use custom css to make the changes. For an overview of css please see http://www.pagelines.com/wiki/Custom_CSS and

 

We'd advise you use web developer tools to look up the id's/selectors to assist with making the css changes you require, there's some great tutorials on youtube which can assist you with this going forward.

 

In the meantime I've provided an example of the code you're looking for below so you can see how the css is formatted, once you have found the correct code you can just past the code into Pagelines>site options>custom code.

 

.section-navbar {
    border-bottom: 1px dashed black;
    border-top: 1px dashed black;
    margin: 0 auto;
    width: 100%;
    z-index: 2020;
}

For more information on css please see - http://www.w3schools.com/css/

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you so much!

 

The code you gave, should I paste that into the custom CSS? Or do I open up mozilla and go to firebug and search for ".section-navbar" and then when I find it copy it, edit it and paste it? 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Tim,

 

What you're best off doing is using either Firebug or your browsers web developers, inspect the navbar, then add your own border code, then copy and paste this into your Custom CSS.

Share this post


Link to post
Share on other sites