# How to Style NavBar and Tabs **URL:** \ **Category:** General\ **Created:** [September 30, 2018, 1:34am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256 "2018-09-30T01:34:47Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [September 30, 2018, 1:34am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/1 "2018-09-30T01:34:47Z")
Can someone direct me to a tutorial or instructions on how to style the navbar and its tabs: 1.) how to change the hover color and remain when active 2.) how to have the tabs change color when rolled over 3.) how to add a tab to an existing navbar (using the UI and not the code) 4.) how to add or convert a tab to a dropdown with sub menus 5.) how to make a navbar’s dropdowns properly display on mobile devices Any help is greatly appreciated. ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [October 10, 2018, 4:19am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/3 "2018-10-10T04:19:50Z")
Randyrie, This all basically comes down to knowing your way around CSS. I would recommend you do some basic CSS tutorials to learn how classes and pseudo classes work. [https://www.w3schools.com/bootstrap4/](https://www.w3schools.com/bootstrap4/) Trying to build a site in Pinegrow without a reasonably good grasp of how CSS works is going to be frustrating. Assuming you’re using Bootstrap, you can take a look at this site for customizing the navbar. [https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0](https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0) ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 16, 2018, 2:23am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/4 "2018-10-16T02:23:09Z")
I’ve been looking, searching and googling for tutorials and instructions how to change the background color or the text color of my tabs when hovered over or clicked on and made active. I’ve tried locating in the bootstrap CSS for the rules to control tab behavior but found nothing that makes sense to me since I’m new to how PineGrow interfaces with bootstrap’s CSS. I’ve found several CSS style suggestions to control tab behavior but when I include the code to the style.css file and apply it to the page, nothing happens - - so the styles.css does not override bootstrap’s? I’ve asked about this before and really would like some help directing me how to use **Pinegrow’s UI** tools to setup tabs to behave the way I want. Is this possible using a UI within PineGrow? If so, could you show via a screen grab or vid where/how to modify my tabs? I’ve not found any PineGrow instructions or tutorials that detail how to do this… ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [October 16, 2018, 1:07pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/5 "2018-10-16T13:07:09Z")
Just click the tab/button in question, go to the visual editor panel, scroll to the BACKGROUND section and click on color. Doing it this way, however, is only going to style that single element. What you need to do is add the Style attribute to the existing CSS rule, which is going to be in the bootstrap.css file. The thing is, you don’t want to change bootstrap.css, you want to copy the rule to a custom stylesheet and then change it there. ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 16, 2018, 6:45pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/6 "2018-10-16T18:45:39Z")
I’ve been trying to do this but cannot get things to work… doing something wrong for sure. Could you step me through how I go from adding the background color (know how to do this) as a style attribute and then add the attribute to the custom.css file? ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [October 16, 2018, 8:04pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/8 "2018-10-16T20:04:19Z")
> [@webmaster](#): > > @randyrie I’ve seen your questions and comments in WebAssist forums and in Wappler forums. I think you should just give up trying to create websites. I think you should not be doing this … please. Maybe @randyrie has a lot to learn, he is trying to learn and understand. We all started somewhere, everyone has his own skill level and learning speed! ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [October 17, 2018, 2:20am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/9 "2018-10-17T02:20:35Z")
> [@webmaster](#): > > I’ve seen your questions and comments in WebAssist forums and in Wappler forums. I think you should just give up trying to create websites. I think you should not be doing this … please. 🙄 That was beyond rude on your part. You **singed up** to be part of the forum **today** and this was your very **first post** here. So the thing you felt was most important, was to sign up with the sole purpose and desire of belittling someone? You may wish to consider what that says about your own character regardless of whether you think you’re a ‘master’ of anything. Perhaps you can instead use your own brilliance to accurately answer all his questions and edify him and the community. ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [October 19, 2018, 7:28am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/10 "2018-10-19T07:28:13Z")
> [@Pinegrow\_User](#): > > … what that says about your own character. Interesting question. So let’s try to find some possible answers on it. EDIT: Finding answers is not required - all is/was against a member of the community. Cheers Thomas ---
**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\ **Post date:** [October 19, 2018, 3:00pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/12 "2018-10-19T15:00:31Z")
@webmaster please respect the constructive spirit of Pinegrow community. If you can’t help @randyrie with a helpful answer to his question or add something meaningful to the discussion about styling Navbars, why post anything at all? And on top of that, to discourage someone with a genuine need and, as you yourself mentioned, a keen interest to learn? I’m not sure if we have a code of conduct written down somewhere. It’s kind of weird that adults would need ideas like “Don’t be a bully” written down at all. “Oh, sorry, I insulted someone because the code of conduct didn’t tell me I should be nice.” I have two wild young boys at home and they don’t need basic stuff like this written down. Anyway, I’m very proud of our friendly community and we’ll not tolerate abuse of any kind here. I’m thinking about deleting @webmaster comments to keep abusive and distracting content off the forum. What do you think? Is there any value or purpose in keeping these comments? EDIT: Decided to delete since they are directly targeting a member of our community. EDIT: Cleaned up my language. ---
**Author:** ![ragandbone](https://avatars.discourse-cdn.com/v4/letter/r/a698b9/32.png) [@ragandbone](https://forum.pinegrow.com/u/ragandbone)\ **Post date:** [October 19, 2018, 3:14pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/13 "2018-10-19T15:14:35Z")
👍 Just like to agree, matjaz! ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [October 19, 2018, 6:12pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/14 "2018-10-19T18:12:44Z")
Much like your [other thread](https://forum.pinegrow.com/t/integrate-or-innovate/2266/10) I think @matjaz said it best with his statement above. 😉 ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [October 20, 2018, 5:46pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/15 "2018-10-20T17:46:29Z")
Does this help at all? ![Untitled-1](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9f704c32806361c3297c9e87b3ff1b78b8199c6f.jpeg) ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 22, 2018, 12:25am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/16 "2018-10-22T00:25:20Z")
Thanks Printninja for the screen shot… it showed me where to look and it did help me to learn how to change the tabs to the way I want them. And a big shout out to all you fellow PG users who threw in your support to keep this forum a friendly and helpful – not hateful – community. BTW, I tend to totally ignore folks like @webmaster… serves no purpose to pay any attention to what they write. ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 27, 2018, 3:37pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/17 "2018-10-27T15:37:53Z")
Again thanks for the screen shot you provided earlier. While I’m now able to style by trial & error my tabs the way I want them (example: [https://faithcentre.info/donations.html](https://faithcentre.info/donations.html)), I am still confused when & why to use the “Background” UI shown on the bottom right vs. using the "background-color: … " in the CSS panel shown in the middle right and how to use and apply the “:active | :hover | :focus | :visited” buttons at the top to assign a style to each state. Do you know of a tutorial that explains this detail in PineGrow? ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [October 27, 2018, 5:46pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/18 "2018-10-27T17:46:31Z")
The **“background”** property is a grouped property that can contain multiple properties/values in one declaration. > The **background** property is a shorthand property for: > > - background-color > - background-image > - background-position > - background-size > - background-repeat > - background-origin > - background-clip > - background-attachment > > It does not matter if one of the property values is missing, as long as the other ones are in this order. > > **CSS Syntax:** > background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; **Example combined** > div { > background: #ffffff url(“img\_tree.png”) no-repeat right top; > } **Example separated** > div { > background-color: #fffff; > background-image: url(“img\_tree.png”); > background-repeat: no-repeat; > background-position: right top; > } See this for more info: [https://www.w3schools.com/cssref/css3\_pr\_background.asp](https://www.w3schools.com/cssref/css3_pr_background.asp) **Pseudo States** “:active | :hover | :focus | :visited" are pseudo states of an HTML element. See this Pinegrow documentation “Styling with CSS”, for explanation how this is working in Pinegrow: > **[Styling with CSS | Pinegrow Web Editor](https://pinegrow.com/docs/master-pinegrow/style/)** > > Styling – painting and positioning elements – is done with CSS properties and rules. Pinegrow offers a collection of powerful styling tools to suit different tasks and workflows. **See section 2** - Active rules **See section 4** - Creating new CSS rules Good luck and have fun! ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [October 27, 2018, 10:10pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/19 "2018-10-27T22:10:53Z")
Randyrie, Marf’s answer above covers it pretty good. I would only offer the following general advice… Don’t learn website design the way I did (backwards, trial and error, messing things up and spending hours trying to figure out what I did wrong.) Two or three hours spent doing a step-by-step tutorial on basic HTML and CSS will save you countless hours down the road. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [October 28, 2018, 12:44am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/20 "2018-10-28T00:44:09Z")
Hi guys. I have to admit, @Printninja and @Marf are doing pretty sterling service helping out on this forum now for some time. I’ve been pretty slack with other stuff blowing up in the real world, but still here quite a bit 🙂 But, I don’t have to scrape together some two bit answers to assist, as you guys have got it covered! Nice one guys, keep up the pleasant helpful service. I will be back to scribble more sometime soonish I hope 🙂 'till then… ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [October 28, 2018, 11:38am UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/21 "2018-10-28T11:38:09Z")
@schpengle Thanks for the compliment !!! 🤩 ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 29, 2018, 3:08pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/22 "2018-10-29T15:08:49Z")
WOW! Thanks for all the info, @Marf. I’ll study these and hopefully get a better handle on how all this is supposed to work in PineGrow. You’re tops! ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [October 29, 2018, 3:13pm UTC](https://forum.pinegrow.com/t/how-to-style-navbar-and-tabs/2256/23 "2018-10-29T15:13:21Z")
Thanks @Printninja… I usually prefer starting with tutorials and docs, if I can find them. I come to this forum only if I cannot comprehend what I’ve found or cannot find any documentation at all (and, of course, the friendly nudges I get from you folks).