• 0
Sign in to follow this  
Followers 0

Two Fixed Nav Customizations

Question

Posted · Report post

I'd like to do two things:

 

1) Make a gradient background for the fixed Nav Section as is done on the Pagelines Docs Page http://docs.pagelines.com/

 

2) Change the rollover color in dropdown menus within Fixed Nav as was done at http://usingpagelines.com to a darker blue from the standard light blue. Not the rollover itself within the nav, but in the actual drop down menu: http://screencast.com/t/hNYBX6EuTS1

 

Any thoughts in terms of the CSS to accomplish this?

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

OK, First of all. I highly recommend you signup to Code School (it's free) and do their Introduction to Web Dev Tools (free course). Honestly, it will make you a ninja on Chromes Web Dev tools, improving your workflow and ability to locate classes and customize your elements.

 

http://www.codeschool.com/courses/discover-devtools

 

Also, the code you have used for your gradient, will only work a select few of browsers, when doing things like gradients, border radiuses etc..., you need to add the code for all browsers. However, PageLines includes an awesome snippet of LESS, that does the hard work for you. So instead of having to write multiple lines of CSS to generate a gradient effect for all browsers, you just write one line of code.

 

I have provided you with the code below.

 

https://gist.github.com/Dannyholt/6447236

 

Now if you wanted to be awesome, you could use nest everything together with LESS, which would look like this:

 

https://gist.github.com/Dannyholt/6447254

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

To do this, you will need to use custom CSS, you can inspect each site and rip the CSS that has been used using your browsers web dev tools.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I added the following but I am unable to locate the code that controls the background of the nav items and outside the section to make the gradient full width.

 

Here is what I have done so far: http://screencast.com/t/FUmUca7yTxWy

 

.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner, .navbar-inner {
    background-color: #FAFAFA;
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny After several hours I figured part of this out to have the gradient and removing the white around menu options. I guess when I posted I was hoping someone with knowledge or having made customization would know faster than me doing trial and error.

 

In any case, here is the code I used - perhaps I have extra classes in this I don't need?

 

 

.section-navbar, .navbar-full-width, .navbar.pl-color-base, .navbar-fixed-top, .navbar-inner, .navbar-static-top .navbar-inner, .navbar-inner {
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
}
 
.navbar.pl-color-base .navbar .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 -3px 0 #225E9B inset;
    color: #444444;
}
 
 
I am still trying to figure out how to change the color of the drop down highlight and make the dropdown have square corners instead of rounded: http://screencast.com/t/hNYBX6EuTS1

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, First of all. I highly recommend you signup to Code School (it's free) and do their Introduction to Web Dev Tools (free course). Honestly, it will make you a ninja on Chromes Web Dev tools, improving your workflow and ability to locate classes and customize your elements.

 

http://www.codeschool.com/courses/discover-devtools

 

Also, the code you have used for your gradient, will only work a select few of browsers, when doing things like gradients, border radiuses etc..., you need to add the code for all browsers. However, PageLines includes an awesome snippet of LESS, that does the hard work for you. So instead of having to write multiple lines of CSS to generate a gradient effect for all browsers, you just write one line of code.

 

I have provided you with the code below.

 

https://gist.github.com/Dannyholt/6447236

 

Now if you wanted to be awesome, you could use nest everything together with LESS, which would look like this:

 

https://gist.github.com/Dannyholt/6447254

 

Thank you Danny for this very insightful response. I'm very much interested in learning how to do this myself so I will take a look at the code school as well.

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