Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Make Mixfolio Theme Menu Bar Static and Change Color

  1. nduoma
    Member

    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

    The blog I need help with is littlefreelibrarynigeria.org.

  2. timethief
    Member

    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/

  3. nduoma
    Member

    Yes I have

  4. designsimply
    Staff

    For the static menu part, start with this:

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

  5. designsimply
    Staff

    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;
}

  6. designsimply
    Staff

    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;
}

  7. nduoma
    Member

    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

  8. nduoma
    Member

    @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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags