How to shift the category/latest buttons down with CSS


(achamess) #1

I increased the size of my logo using some CSS I found in a thread here, and that pushed the header down. This achieved the goal of making the logo bigger, but now it pushed out the white space between the category/latest buttons. How do I bring back some space there? And in general, how do I find out how to manipulate CSS elements on my forum. Is there a CSS style sheet somewhere?

Here is the code I used to enlarge the logo:

  max-height: 80px !important;
  margin-top:-8px;
}

.d-header {
    height: 80px;
}

Site: forum.gofishcarolinas.com


(Jay Pfaffman) #2

If you want help with that level of detail you should include a link to your site.


(achamess) #3

Thanks. Updated to include link.


(Kane York) #4

You increased .d-header from 60 to 80, so:

#main-outlet {
  padding-top: 102px; // 82px + 20
}

(achamess) #5

Thanks. That did the trick. In general, how does one identidy the CSS element of interest? Here it is main-outlet. How would I know that? I used the Developer tools, but perhaps I wasn’t using them the right way.


(Kane York) #6

When you hover an element, content is colored blue, padding is green, and margin is orange.

You select an easy-to-select item you’re pretty sure is affected by the layout - here, anything in the topic list.

Move up the tree until you see the spacing rule you want to copy. If the content box includes the spacing, you’ve gone too far (there are exceptions to this).

image