Header height and sticky menu

Could you provide a link to your site so I can take a look directly?

Hi Kathryn

Tonal isn’t installed for now, so I can’t provide link. Sorry

Tonal has 120px of padding above and below the header area by default. You can adjust it by installing a custom CSS plugin, such as the one that comes with Jetpack, and adding the following to the Appearance > Customize > CSS editor:

@media only screen and (min-width: 64.063em) {
	#masthead {
		padding: 60px 0;
	}
}

The @media line tells the browser to only apply the change to large screens.

You should adjust the 60px value until it looks good to you.

and to get sticky for icon menu ?

Do you mean that you want the menu to always be open instead of having to click to open it?

Hi Sheri !

Thanks for reply. By sticky menu, I mean that menu icon don’t scroll with content and stay always visible, even though you are on bottom page.

I must say I like very much your theme too (photo addict), but I never understood how to use it. LOL

By sticky menu, I mean that menu icon don’t scroll with content and stay always visible, even though you are on bottom page.

Aha. I would call that “fixed positioning.” You may be able to put together some custom CSS to make that happen. I can try to give you an example to get you started and then you can take it from there.

Since you didn’t post an example link, I looked at https://tonaldemo.wordpress.com/ and the following example will make the menu visible and fixed position. The menu in this particular example is pretty tall, 364px, and your menu may be shorter so you would need to adjust the number in that case. Also, the menu has some opacity by default, so I added a solid background color to the #menu-block, but you don’t have to keep that if you don’t want.

@media only screen and (min-width: 64.063em) {
	body {
		padding-top: 364px;
	}
	#menu-block {
		background: #333;
		display: block;
		position: fixed;
		z-index: 99;
	}
	#menu-nav {
		display: none;
	}
}

The @media rule, again, only applies this to large screens. If you wanted to apply menu changes to small screens as well, you would need to do some extra work to set them up properly for each major screen size.

Add the example to your Appearance > Customize > CSS editor after you have installed Jetpack and made suer the Custom CSS module is enabled.

If you’d like to learn more about CSS so you can keep going with updates like the example above, here are a couple great tutorials if you’re just getting started:
https://www.htmldog.com/guides/cssbeginner/
https://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

I have blog on wordpress start hacking i have problem with my theme.i already make my menu sticky. but now the header becomes invisible.i would like to add my site title to that sticky menu how can i do? how can i edit html of the them?

@hackerhere, I’m sorry but we do not support your theme. You need to talk to your theme’s vendors or consider hiring someone.