Can I have my tablet header layout exactly the same as PC?

  • Unknown's avatar
    dcwhyte · Member ·

    The iPad header is great for fsg.nz – can I have this same layout for the header on PC?

    I’m using Business Identity theme which is great – and have come this far with outstanding assistance from the “engineers” – so can this header appearance issue be resolved?

    David

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

  • Unknown's avatar
    dcwhyte · Member ·

    Sorry the blog I need help with is http://www.fsg.nz NOT http://www.dcwhyte.com

  • Unknown's avatar
    designsimply · Member ·

    It looks like we missed this help request earlier, sorry about that!

    I checked http://fsg.nz/ just now and I wanted to start out by documenting what the header currently looks like:

    * https://cloudup.com/c2_UlblRiI3 (desktop)
    * https://cloudup.com/cxqQ8fMaCag (iPad landscape)
    * https://cloudup.com/cqTUh4q2COj (iPad portrait)

    Your request to change the main menu on desktop to match how it works on the iPad portrait view is no small task. There are a couple different ways to go about doing it. One way would be to choose the “Start Fresh” option in the Appearance > Customize > CSS panel, copy the theme’s style.css content into the CSS editor, and then make any necessary adjustments to the media queries to rip out anything in the CSS that affects the menu styling for large screens only. I don’t recommend this option to people who are not experts with CSS for a couple reasons though. One is that it takes a ton of work to not only figure out what to delete but after you do it you are on the hook to maintain the CSS carefully after you do that and I think it makes the CSS harder to work with, especially when debugging. Another problem with that approach is that you would not get the benefit of any CSS-related updates made by the theme author because you would essentially be overriding all of the CSS full stop. Instead of doing that, another way to accomplish the menu switch is to go through the CSS piece by piece and figure out all of the parts that apply to the menu at large screen sizes and then add new CSS to override the old CSS. I have taken some time and come up with an example for you, however, I will note that it’s rather tricky, there are a few different moving parts, and it may not be perfect so you should test it carefully if you use it.

    Here we go:

    .menu-toggle {
	font-size: 13px;
	font-weight: 400;
	border: none;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: block;
	line-height: 0;
	margin: 0;
	outline: none;
	padding: 0;
	position: absolute;
	top: 10px;
	right: 250px;
	width: 48px;
	height: 48px;
	text-transform: uppercase;
}

.main-navigation {
	position: absolute;
	top: 0px;
	right: -240px;
	width: 240px;
}

/* Hide the menu hover toggle button */
.main-navigation > div > ul > li > a {
	display: none;
}

.main-navigation > div {
	width: 100%;
}

.main-navigation ul ul {
	position: relative;
	width: 240px;
}

.main-navigation ul li > ul {
	left: auto;
}

.main-navigation ul ul > li {
	padding: 0;
}

.main-navigation a {
	text-align: center;
}

.main-navigation .search-form {
	background: none;
		border: none;
		float: none;
		padding: 0;
	margin: 0 auto;
		width: 100%;
	}

#page .main-navigation .search-field {
	display: block;
	margin: 0px auto;
	width: 200px;
	height: 22px;
}

/* Turn off main menu hover animation */
.main-navigation ul li:hover > ul {
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
	z-index: 1;
}

/* menu colors */
.main-navigation {
	-webkit-box-shadow: inset 2px 0px 3px -1px rgba( 0, 0, 0, .12 );
	-moz-box-shadow: inset 2px 0px 3px -1px rgba( 0, 0, 0, .12 );
	box-shadow: inset 2px 0px 3px -1px rgba( 0, 0, 0, .12 );
	background-color: #32333f !important;
}

.main-navigation ul ul {
	background-color: transparent !important;
	box-shadow: none;
}

.main-navigation,
.main-navigation a {
	color: #ffffff !important;
}

.main-navigation li > a:active {
	color: #c2bdd1 !important;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	color: #b0abbd !important;
}

.main-navigation li .current_page_ancestor > a {
	color: #fff !important;
}

    This is a pretty major CSS snippet, so I would recommend adding it to the bottom of any other custom CSS you add into the Appearance > Customize > CSS editor and then test it out to see if it makes the change you expected and works well on all different types of pages. I tested the home page and did a few other spot checks, and I think it approximates the responsive menu fairly well. I tested using Chrome 39 on a Mac.

  • The topic ‘Can I have my tablet header layout exactly the same as PC?’ is closed to new replies.