Purpose menu Heading customization

  • dermavanzada · Member ·

    I would like to change the way the heading band of the website works. Normally when you are on a desktop computer and move the page a little bit down the top area dissolves into a white solid band with the menu clearly showing over the band;
    (like this—– https://drive.google.com/open?id=0B2cEMmM2ORERQVplWGdZSWlSYlE) —- instead of— https://drive.google.com/open?id=0B2cEMmM2ORERbkJqNGNCaFV3LWc —– Can you help me to eliminate the heading animation to get the white band with the menu on top, just like in the first picture. The theme I’m using is: purpose. The site I need help with is: dermavanzada.com

    The blog I need help with is: (visible only to logged in users)

  • siobhyb · Staff ·

    Hi there,

    You can stop the dissolving effect by adding the following snippet to the CSS panel of the WordPress.com Customizer:

    #header.header-small, #header.text-dark {
    background-image: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

    If you’d also like the menu to be styled exactly the same way as it appears upon scroll, then the following snippet will do the trick:

    #header.header-large .menu-container {
	padding: 12px 0px;
}

#header.header-large .site-title a,
#header.header-large .menu a,
#header.header-large .menu a:link,
#header.header-large .menu a:visited,
#header.header-large .menu-toggle,
#header.header-large .menu-toggle:before {
	color: #333333;
	color: rgba(0, 0, 0, 0.8);
}

#header.header-large {
	background-image: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

    Hope that helps!

  • The topic ‘Purpose menu Heading customization’ is closed to new replies.