WordPress.com Forums » Topic: Make Mixfolio Theme Menu Bar Static and Change Color

nduoma on "Make Mixfolio Theme Menu Bar Static and Change Color"

nduoma — Thu, 27 Sep 2012 10:54:07 +0000

@designsimply
Random: I just visited your blog and i love it :)
I drove part of the Oregon coast (drove from Portland to Tillamook) in a rented red bug so your pictures made me smile.

Thanks again for your help!

nduoma on "Make Mixfolio Theme Menu Bar Static and Change Color"

nduoma — Thu, 27 Sep 2012 10:45:39 +0000

Thank you so much designsimply. The static part works as does the color changes. I would like to make some changes to the colors but I am a little overwhelmed by the long code. Do you mind telling me what each block does? that way I can play around with different options.

I would also like to make the text on the menu bar bigger and bolder. Please let me know how to do this.

One more question. On the pages, the page name shows up at the top in blue and a big font. Can i change the color and make it smaller?

I really appreciate you taking time to help me. Thanks again

designsimply on "Make Mixfolio Theme Menu Bar Static and Change Color"

designsimply — Wed, 26 Sep 2012 23:10:38 +0000

I would recommend picking a solid color—that's my personal preference, I think it looks nicer.

If you do change the color, you may also want to change the font color and submenu font colors. It turns out there are a decent number of CSS rules to control the nicely thought out colors in that menu. :) Here's a quick run down using some basic orangey colors I picked out you can start with as an example if you'd like to work on changing the menu colors in the Mixfolio theme:

color: orange;
	text-shadow: 0 -1px 0 rgba( 255, 0, 0, 0.25 );
	word-break: break-word;
}
#branding h1 a:hover,
#branding .brand a:hover,
#branding ul .active > a {
	background-color: transparent;
	background-color: rgba( 255, 0, 0, 0.05 );
	color: hotpink;
	text-decoration: none;
}
#branding div > ul a:hover {
	color: chocolate;
}
#branding div > ul .active > a {
	background-color: orange;
	background-color: rgba( 255, 165, 0, 0.5 );
}
#branding div > ul a.menu:hover,
#branding div > ul li.open .menu,
#branding div > ul .dropdown-toggle:hover,
#branding div > ul .dropdown.open .dropdown-toggle {
	background: wheat;
	background: rgba( 245, 222, 179, 0.05 );
}
#branding div > ul .sub-menu,
#branding div > ul .children {
	background-color: wheat;
}
#branding div > ul .sub-menu a,
#branding div > ul .children a {
	color: black;
}
#branding div > ul li.dropdown.open,
#branding div > ul .sub-menu a.open,
#branding div > ul .children a.open {
	background: orange;
	background: rgba( 255, 165, 0, 0.05 );
}
#branding div > ul .sub-menu li a,
#branding div > ul .children li a {
	color: black;
	text-shadow: none;
}
#branding div > ul .sub-menu li a:hover,
#branding div > ul .children li a:hover {
	background-color: chocolate;
	background-repeat: repeat-x;
	background-image: 0 to( #d2691e ) );
	background-image: 0 color-stop( 100%, #d2691e ) );
	background-image: linear-gradient( top, #ffa500, #d2691e );
	color: #fff;
}
#branding div > ul .sub-menu .active a,
#branding div > ul .children .active a {
	color: black;
	font-weight: bold;
}
#branding div > ul .sub-menu .divider,
#branding div > ul .children .divider {
	background-color: #222;
	border-color: #444;
}

designsimply on "Make Mixfolio Theme Menu Bar Static and Change Color"

designsimply — Wed, 26 Sep 2012 22:57:19 +0000

The simplest update for a menu background color change would be this:

#branding-inner,
#branding .fill {
	background-color: #ffffff;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

designsimply on "Make Mixfolio Theme Menu Bar Static and Change Color"

designsimply — Wed, 26 Sep 2012 22:56:54 +0000

For the static menu part, start with this:

.columns {
	margin-top: 84px;
}
#branding {
	position: fixed;
	z-index: 9;
	width: 100%;
}

nduoma on "Make Mixfolio Theme Menu Bar Static and Change Color"

nduoma — Wed, 26 Sep 2012 00:19:01 +0000

Yes I have

timethief on "Make Mixfolio Theme Menu Bar Static and Change Color"

timethief — Tue, 25 Sep 2012 23:59:33 +0000

Have you purchased an annually renewable custom design upgrade http://en.support.wordpress.com/custom-design/ so you can do the required CSS editing? http://en.support.wordpress.com/custom-design/editing-css/

nduoma on "Make Mixfolio Theme Menu Bar Static and Change Color"

nduoma — Tue, 25 Sep 2012 23:14:30 +0000

Hello. I would like to make the menu bar in the mixfolio theme static so that it doesn't scroll up and ppl view page. Please let me know if how I can do this.
I would also like to change the color of the menu bar from black to white or yellow if possible.

Thanks