Title: firebug html/css
Last modified: May 24, 2017

---

# firebug html/css

 *  [jenksandartt](https://wordpress.org/support/users/jenksandartt/)
 * (@jenksandartt)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/firebug-htmlcss/)
 * Recently i downloaded firebug to try to get the css code. I wanted one of my 
   pages to NOT have any navigation tabs like a landing page. I understand the basics
   of firebug. I selected the nav tab and firebug selected the html and css; however
   I was unable to see or understand the css code to copy. I am new to this so someone
   in support gave me the code body.page-id-1072 .main-nav {
    display: none; } body.
   page-id-1072 #wrapper { margin-top: 25%; }
 * and it worked great. I just personally want to know how did he come up with that
   code? Is it possible to see this code on firebug in the manner that I mentioned
   above? Or am I missing some basic info that I need to understand. If so, can 
   someone give me some understanding on this?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/firebug-htmlcss/#post-9165544)
 * In Firebug and most built-in browser developer tools, you simply right-click 
   the part of the page you want to modify and choose something like “Inspect.” 
   That will reveal the code at and around the element you want to modify, then 
   just start modifying the code until you see the desired result (the modifications
   are rendered live in the browser).
 * Though Firebug doesn’t have an official documentation on using the inspector,
   there are a number of tutorials: [http://getfirebug.com/wiki/index.php/Firebug_Links](http://getfirebug.com/wiki/index.php/Firebug_Links)
 * Here’s some info on using the inspector in Firefox’s developer tools: [https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour)
 * And, Chrome’s developer tools: [https://developer.chrome.com/devtools/docs/elements-styles](https://developer.chrome.com/devtools/docs/elements-styles)
 *  Thread Starter [jenksandartt](https://wordpress.org/support/users/jenksandartt/)
 * (@jenksandartt)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/firebug-htmlcss/#post-9165778)
 * Thx for your response. I get the fundamentals of firebug. I have successfully
   used it quite a few times to modify my websites. The issue I sometimes have is,
   sometimes I don’t see the css that I need to modify for certain things that I
   inspect. I wanted to hide my navigation tab for my thank you page. I inspected
   the tab, went to the css side to adjust to see live changes; but no changes happen.
   Plus the css code that I received from support doesn’t match the code that i 
   see in firebug. That was the main thing that confuses me. The css code that I
   received actually worked and removed my nav tabs. I am just curious to understand
   why i don’t see that same css code when i inspect on firebug.
 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/firebug-htmlcss/#post-9165985)
 * Finding the right element to target and right code to use is a lot of trial and
   error, there’s no right way to use it.
 * Generally, right-click the element you want to target, then try elements above
   and below until you find the right one to adjust.
 * Personally, I like dropping in something like this on each one until I hit the
   right one:
 * `display: none !important;`
 * No matter what, adding that to an element will hide it completely, so it’s an
   easy way to be sure whether or not your targeting the right element in the first
   place.
 * Once you’re targeting the right element, it’s just adjusting the CSS as desired
   until you get the right effect.
 * There’s a lot of “trial and error” and “learn by doing” in there, but to answer
   your original question, most folks usually don’t know the right thing immediately
   when inspecting with browser tools, and if they do, that’s mostly luck. 😉
 * Have fun with it, experiment. The constant little tweaking is one of the best
   parts of owning a site.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘firebug html/css’ is closed to new replies.

## Tags

 * [firebug](https://wordpress.org/support/topic-tag/firebug/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [James Huff](https://wordpress.org/support/users/macmanx/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/firebug-htmlcss/#post-9165985)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics