Log in to support

How to center the menu and logo

How to center the menu and logo

Here is a guide that will give you the custom css to make the logo and menu within Flexform. All you need to do is add the below to Flexform Options > General Options > Custom CSS:

/* Full width logo code */
#header-section #logo {
width: 100%;
}
#header-section #logo img, #header-section #logo img.retina {
margin: 0 auto;
}

/* Full width menu code */
#nav-section {
width: 100%!important;
}
.nav-wrap {
float: none!important;
}
#main-navigation {
float: none;
width: 100%;
height: 48px;
text-align: center;
}
nav .menu li {
float: none;
}

/* Disable the nav search */
#nav-search {
display: none;
}

/* Responsive code */
@media only screen and (max-width: 767px) {
#header-section #logo img, #header-section #logo img.retina {
margin-bottom: 20px;
}
#main-navigation {
width: auto;
height: auto;
text-align: left;
}
}

– Ed

2 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">