Jump to content

Archived

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

illinimatt81

Two Fixed Nav Customizations

Recommended Posts

illinimatt81    21
illinimatt81

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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
illinimatt81    21
illinimatt81

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
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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

×