Width of Subnav bar – Magazine Theme

[michaelapotter]

Hi! I posted this question last week and haven't had a response, so reposting again.

I would like to shorten the width of the subnav bar on this site so that it does not extend past the width of the content: guillaumegauthereau.com

What should I change/update in the style sheet?

Thanks in advance!
Michaela

[rfmeier]

Hello,

Around line ~477 in your style.css file, modify your css like so;

/* line ~477 */
#subnav {
    background: #690706;
    border-bottom: 1px solid #111;
    border-top: 1px solid #111;
    clear: both;
    overflow: hidden;
    width: 960px; /* add the width */
    margin: 0 auto; /* center the navigation */
}

This still leaves the drop shadow. If you want to also remove that, modify the style.css like so;

/* line ~566 */
#inner {
	/* background: url(images/inner.png) repeat-x; */
	overflow: hidden;
}

I hope this helps.

---

Ryan Meier – Twitter

[michaelapotter]

Thanks Ryan! That fixed the width of the subnav.

The code for the shadow that you shared is the same code that is in the style sheet already. Is there a way to set the width of that as well?

Cheers,
Michaela

[rfmeier]

The code I shared commented that background out, removing it. It was just an option.

Here is the code to shrink and center the drop-shadow;

/* line ~567 of style.css */
#inner {
    background: url(images/inner.png) repeat-x;
    overflow: hidden;
    width: 960px; /* Add the width */
    margin: 0 auto; /* center the element */
}

Here is a preview: https://www.diigo.com/item/image/40chg/iq4e

I hope this helps.

---

Ryan Meier – Twitter

[michaelapotter]

Perfect! Thanks so much for your speedy replies Ryan!!

[rfmeier]

You are welcome. I am glad I could help.

---

Ryan Meier – Twitter

[Author]

Posts