Jump to content


Photo
- - - - -

Two Fixed Nav Customizations


Best Answer Danny , 05 September 2013 - 08:04 AM

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.codeschoo...scover-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.

 

 

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

 

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 illinimatt81

illinimatt81

    Super Member

  • Members

  • 211 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 04 September 2013 - 01:21 PM

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?



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17600 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 September 2013 - 01:48 PM

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.



#3 illinimatt81

illinimatt81

    Super Member

  • Members

  • 211 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 04 September 2013 - 02:06 PM

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


#4 illinimatt81

illinimatt81

    Super Member

  • Members

  • 211 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 04 September 2013 - 08:41 PM

@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


#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 17600 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 September 2013 - 08:04 AM   Best Answer

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.codeschoo...scover-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.

 

 

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

 


  • illinimatt81 likes this

#6 illinimatt81

illinimatt81

    Super Member

  • Members

  • 211 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 05 September 2013 - 01:52 PM

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.codeschoo...scover-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.

 

 

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

 

 

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.