Jump to content

Archived

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

gamarayllc

How to Customize the Standard NavBar

Recommended Posts

gamarayllc    2
gamarayllc

I had a hard time finding everything in one place when I started trying to customize my navbar but after a ton of hunting with Firebug / Chrome's development tool I was successful.

 

Let me point out that you should really learn some CSS when doing this. At the bare minimum selectors and how they inherit. I've been writing CSS for 10+ years and I still learn something new about it everyday. Please please use tools like Firebug and or the browser development tool for inspecting elements. It's not only helpful for understanding the structure of the CSS but will save you tons of time. 

 

Under NavBar I opted to use the Standard NavBar - Light Grey Theme and the Standard NavBar is my Main Nav.

/*THIS CUSTOMIZES THE BACKGROUND COLORS, BORDER */
.navbar.pl-color-grey {
	background-color: #616432;
	background-image: -moz-linear-gradient(top,#616432,#616432);
	background-image: -ms-linear-gradient(top,#616432,#616432);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#616432),to(#616432));
	background-image: -webkit-linear-gradient(top,#616432,#616432);
	background-image: -o-linear-gradient(top,#616432,#616432);
	background-image: linear-gradient(top,#616432,#616432);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616432', endColorstr='#616432', GradientType=0);
	border-top: 5px solid #cbe82e;
	color: #FFF;
}

/*THIS CUSTOMIZES THE LIST ITEMS - THE FONTS */
.navbar.pl-color-grey .navline > li > a {
color: #FFFFFF;
text-shadow: 0 1px 0 #000000;
}

.navbar.pl-color-grey .navline > li.current-menu-item > a {
	color: #cbe82e;
}

/*THIS CUSTOMIZES THE LIST ITEMS HOVER - THE FONTS */
.navbar.pl-color-grey .navline > li > a:hover {
color: #cbe82e;
text-shadow: 0 1px 0 #000000;
}

/*THIS CUSTOMIZES THE DROPDOWN - BACKGROUND COLOR */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
	background-color: #616432;
	background-image: none;
	background-repeat: repeat-x;

}

 

 

Screenshot of my NavBar selection and how my customized navbar looks. 

 

  • Like 2

Share this post


Link to post
Share on other sites
James B    436
James B

Thank you very much for sharing this, I know there will be many users who will find this extremely useful :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
matshearer    0
matshearer

Strange, I tried using this, and it did nothing for my website.  I changed things up too, so I can see a difference, and nothing.  Strange.  Has the code to change the standard NavBar changed?  I've tried using Firebug to figure this out on my own, but I can't seem to find the CSS I need to fully customized this NavBar.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Mat,

 

Where did you paste the code? Do you have NavBar or Nav Classic implemented?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
toddlo    3
toddlo

Why though aren't the settings in the NavBar more more powerful to be able to do this without css and why does a user have to provide the helpful solution?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

We do not like to overload the user with options for every small detail, we did this with Platform Pro and the majority of the feedback from that was that users were confused. So we limited the options in PageLines Framework.

In DMS you have more control as the navigation options have several color schemes to choose from.

 

Also, as far as I can tell, the code the user has provided is something I wrote years ago and added to a forum post when we used Vanilla forums.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • 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
    • pehja
      By pehja+
      It would be nice to have an option in the impuls section to only view hamburger menu.  That or let nav pro have that option ad also transparent background. Impuls is a great section. Love it.
    • catalinam
      By catalinam+
      Hi lovely Pagelines Forum Helpers!
      I am new to Pagelines as well as coding in general so sorry if this is stooopid. 
      I am reimaging my site www.theunimpossibles.com and I am trying to do a few seemingly simple things using paleness and modifying the lynette theme.
      How do I put a fine key line on the bottom of the dropdown nav? e.g. <hr style="height:1px;border-width:0;color:#e4e4e4;background-color:#e4e4e4”> I want a second nav in grey to site above it but I can't get the grey to go all the way to the top and full width. Is it possible to put social icons in the nav too? How can I make these two nav global but underneath the slider as per below only on the homepage? Is it possible to embed the royal slider onto the homepage? e.g putting the shortcode [new_royalslider id="4"] in the embed area generates the error: [RoyalSlider Error] Incorrect RoyalSlider ID or problem with query. Is it possible to make the slider, the instagram feed and the hero image on the blog posts full bleed? On the category page e.g http://theunimpossibles.com/category/recipes I would like to change "Posts  Currently viewing the category: "OM NOMS"" to be bigger, centred, and with more padding and only show the words "TOPIC: OM NOMS". Is it possible to remove the extract and put the date underneath similar to:  http://grittypretty.com/category/makeup/? Is it possible to make the post images on the blog posts wider and the text smaller? http://theunimpossibles.com/2015/06/30/amazingly-delicious-paleo-orange-blueberry-almond-meal-scones-with-earl-grey-cashew-cream/?pl_edit=on e.g the blog posts similar to http://grittypretty.com/makeup/the-top-6-office-beauty-must-haves/?  Obviously keeping everything responsive!
      I have been trying to Google all of this but alas I am very very stuck and would appreciate any help!
      Kindest,
      Catalina
       
    • richardjacruz
      By richardjacruz+
      I'm building a site at:
      http://dev.stevensoncraneservice.com/
      and I followed the instructions on building a "branding" area in the header:
      http://docs.pagelines.com/tutorials/creating-a-branding-area
      But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

      Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.
      Thanks.
    • richardjacruz
      By richardjacruz+
      I saw this website build with PageLines DMS:
      http://lupusla.org/
      I want to have a header that's VERY similar. However, with the fixed area, I'm struggling with how to do that. 
      I want to have a "super menu" under one of the tabs, and drop downs for others, a larger logo to the left like this, a search all the way to the right, and a call-to-action at the top like we see with "Donate" (I want "Request a Quote").
      What area (fixed or header) is best to use for this, and, within that area, what are the best sections to place?
      Thanks. 
×