Custom static front page menu

  • Unknown's avatar
    rgw2011 · Member ·

    Hi,
    I am doing a website for a company and the director want their landing page to be static with no menu on it. He only wanted the logo, an image and two flags with links to choose the language, nothing more. How can I do that and remove the menu that I have on the whole pages?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we can do this, but I’ll just mention that search engines like to see some content on a page. If all they have is a logo and three images (two flags and the featured image) the search engines have nothing to put into their index snippets and no clue as to what the site is about. What I would suggest is to add some sort of introductory statement to the home page, either above or below the flags, and wrap them in a div with a CSS class, and then we can use the CSS class to hide that added content from view, but it would still be there for the search engines to find. It would look something like this. 

    <div class="my-intro">
site introductory statement
</div>

    You would add the divs around the content in the Text/HTML tab in the page editor. Then you would add the following to the custom CSS. 

    .my-intro {
display: none;
}

    On hiding the menu, I’m assuming they would then want the logo centered, and to get rid of the transparent black background. This would be the CSS to do that. 

    .home .main-navigation {
	display: none;
}
.site-branding {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.hero-image .site-header {
	background: none;
}

    A couple notes on what is currently in your custom CSS. Change the first CSS rule CSS selector from this
    site-header
    to this
    .hero-image .site-header
    Note that the “site-header” has a period in front of it. CSS classes in the CSS editor have to have a period ( . ). CSS ids would have the hash tag ( # ). That let’s the browser know if it is a CSS class or a CSS id so it can apply the CSS to the proper thing.

    Also, remove the following from the custom CSS as it has no CSS selector on it, and it could possibly cause some issues. 

    {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: button;
	padding: 13px 26px;
	background: rgb(36,36,36);
	border-width: 0;
	border-style: initial;
	border-color: initial;
	border-image: initial;
}
  • The topic ‘Custom static front page menu’ is closed to new replies.