Jump to content

Archived

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

monmart

How to Customizing Navbar Styling

Recommended Posts

monmart

After many hours, I'm finally asking for help with this. Even after using Chrome DEVTools I'm still lost.

 

As you might notice on most websites, the navbar doesn't have a bar - it's just text. I've been trying to remove the bar through styling but having no success. I've came close though.

 

Can anyone help me with creating a navbar with only text and no graphic bar. Maybe there is some other CSS I can try.

 

I'm beginning to think this is something to do with Bootstrap,  but I'm not sure.

 

 

I'm sorry I don't have a live site, it's a private project.

 

 

 

 

[attachment=1478:screenone.png]

 

 

Share this post


Link to post
Share on other sites
Jake

Hi monmart - It appears to me that what you need to eliminate at this point is the shadow around the nav. Try this:

 

.navbar, .navbar-inner, .navbar-collapse {box-shadow: none;}


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
monmart

This works, thanks!

 

How did you find this out?

 

I noticed you put commas between your classes, but some people don't. Does it make a difference if the commas are there or not?

Share this post


Link to post
Share on other sites
Jake

Glad to hear that did the trick for you. I was able to isolate this area with devtools as well (see http://d.pr/i/G5Ei). You were on the right track, believe me, but were probably looking for a solution in the same place where you removed the background color and it's just a bit of experience fussing with navs that pointed me in the right direction.

 

To be honest, it was probably overkill, you likely could have achieved the same result using just the .navbar class. What the comma is doing is applying the same styling to multiple classes (.navbar AND .navbar-inner AND .navbar-collapse). So another example, if you wanted to change the color of your h1 tag alone you would just do something like h1 {color: #000;} but if you wanted to change both the h1 and h2 tags to the same color you could do h1, h2 {color: #000;}

 

Hope that little CSS lesson helps!


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
monmart

It sure does Jake! And soon I will be a master like you!

 

 

cheers.

Share this post


Link to post
Share on other sites

×