Moving Primary Menu Zuki Theme

  • Unknown's avatar
    2018hsltriathlon · Member ·

    Can anyone assist me with this? I need to move where my primary menu is, if it cant be moved atleast remove it then.

    Welcome To Weights & Heart Rates!

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

  • staff-happychia · Staff ·

    Please try the options I suggested in the email and feel free to let me know if they are not helpful.

  • Unknown's avatar
    designsimply · Member ·

    Because of the way the menu changes according to the screen width using media queries, it actually could take quite a bit of CSS work to move the menu.

    I tried to come up with a good example and it took me a lot longer than I thought it would. I can give you what I came up with and you can try it out to see if it will work for you. Note that this example depends on the other custom CSS you have already saved in your Appearance > Customize > CSS editor, so any changes to the other CSS or to the size of the menu (i.e. adding another menu item) means you may need to adjust the CSS accordingly. Here’s the example if you’d like to try it out:

    @media screen and (min-width: 1260px) {
	#masthead {
		min-height: 250px;
	}

	#site-nav ul {
		position: absolute;
		left: 189px;
		bottom: -62px;
	}

	#main-wrap {
		padding-top: 62px;
	}
}

@media screen and (min-width: 401px) and (max-width: 1260px) {
	#container {
		position: relative;
	}

	#masthead {
		position: static;
		min-height: 214px;
	}

	#site-nav {
		margin-top: 80px;
	}

	#mobile-menu-toggle {
		position: absolute;
		top: 214px;
		right: 0;
		z-index: 1;
	}

	#main-wrap {
		padding-top: 44px;
	}

	#mobile-menu-toggle {
		position: absolute;
		top: 214px;
	}
}

@media screen and (min-width: 401px) and (max-width: 870px) {
	#masthead {
		border: 1px dashed red;
		min-height: 160px;
	}

	#mobile-menu-toggle {
		top: 160px;
	}
}

@media screen and (max-width: 400px) {
	#container {
		position: relative;
	}

	#masthead {
		min-height: 80px;
		position: static;
	}

	#mobile-menu-toggle {
		position: absolute;
		top: 74px;
		right: 0;
		z-index: 1;
	}

	#main-wrap {
		padding-top: 44px;
	}
}

    It’s good to be careful when working on CSS for a responsive design such as the one the Zuki theme uses. To learn more about media queries, go to http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    May I ask about the email referenced by chaitanyamsv? Was it a private email sent with an answer to the question posted here in the WordPress.com CSS forums?

  • The topic ‘Moving Primary Menu Zuki Theme’ is closed to new replies.