Few navigation menu questions here…How can I center the navigation since I have the logo expanded on the top? How can I change the size of the logo (make it smaller) if I would like to keep it on top of the navigation?
Hi @lillaik.
I hope you are well today and thank you for your question.
Could you please share me your site URL where it’s displaying so that i can help you?
Kind Regards,
Movin
Hi Movin,
Currently the website is in maintenance mode. Here’s the WordPress login details in PM (private reply).
http://derosentertainment.com/wp-login.php
mov
Zobj9LYjJROog(lWuXNz*IiW
I would appreciate it if you can PM back (set as private reply) if you are providing any screenshots (I noticed they were visible in public).
Also, I noticed there’s a WordPress 4.6 update, can I update it automatically?
Kind regards,
Lilly
How can I center the navigation since I have the logo expanded on the top? How can I change the size of the logo (make it smaller) if I would like to keep it on top of the navigation?
You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.
Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS
#logo {
width: 500px;
margin: 0 auto;
}
#page .navbar-header {
float: none;
}
Also, I noticed there’s a WordPress 4.6 update, can I update it automatically?
Yes you can
Thanks Movin, the smaller logo worked perfect, but the navigation has not changed at all.
Try using the below CSS code to centre navigation menu.
#page ul#menu-primary-menu {
float: none;
margin: 0 auto;
display: table;
}
I tried the CSS and the navigation menu showed up on the right centered. See attached screenshot. Please do not attach any screenshots of the website in public, thank you!
Also, I wonder if the child style.css has something to do with it:
@media (min-width:1000px) {
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
float: left
}
.col-lg-12 {
width: 100%
}
.col-lg-11 {
width: 91.66666667%
}
.col-lg-10 {
width: 83.33333333%
}
.col-lg-9 {
width: 75%
}
.col-lg-8 {
width: 66.66666667%
}
.col-lg-7 {
width: 58.33333333%
}
.col-lg-6 {
width: 50%
}
.col-lg-5 {
width: 41.66666667%
}
.col-lg-4 {
width: 33.33333333%
}
.col-lg-3 {
width: 25%
}
.col-lg-2 {
width: 16.66666667%
}
.col-lg-1 {
width: 8.33333333%
}
.col-lg-pull-12 {
right: 100%
}
.col-lg-pull-11 {
right: 91.66666667%
}
.col-lg-pull-10 {
right: 83.33333333%
}
.col-lg-pull-9 {
right: 75%
}
.col-lg-pull-8 {
right: 66.66666667%
}
.col-lg-pull-7 {
right: 58.33333333%
}
.col-lg-pull-6 {
right: 50%
}
.col-lg-pull-5 {
right: 41.66666667%
}
.col-lg-pull-4 {
right: 33.33333333%
}
.col-lg-pull-3 {
right: 25%
}
.col-lg-pull-2 {
right: 16.66666667%
}
.col-lg-pull-1 {
right: 8.33333333%
}
.col-lg-pull-0 {
right: auto
}
.col-lg-push-12 {
left: 100%
}
.col-lg-push-11 {
left: 91.66666667%
}
.col-lg-push-10 {
left: 83.33333333%
}
.col-lg-push-9 {
left: 75%
}
.col-lg-push-8 {
left: 66.66666667%
}
.col-lg-push-7 {
left: 58.33333333%
}
.col-lg-push-6 {
left: 50%
}
.col-lg-push-5 {
left: 41.66666667%
}
.col-lg-push-4 {
left: 33.33333333%
}
.col-lg-push-3 {
left: 25%
}
.col-lg-push-2 {
left: 16.66666667%
}
.col-lg-push-1 {
left: 8.33333333%
}
.col-lg-push-0 {
left: auto
}
.col-lg-offset-12 {
margin-left: 100%
}
.col-lg-offset-11 {
margin-left: 91.66666667%
}
.col-lg-offset-10 {
margin-left: 83.33333333%
}
.col-lg-offset-9 {
margin-left: 75%
}
.col-lg-offset-8 {
margin-left: 66.66666667%
}
.col-lg-offset-7 {
margin-left: 58.33333333%
}
.col-lg-offset-6 {
margin-left: 50%
}
.col-lg-offset-5 {
margin-left: 41.66666667%
}
.col-lg-offset-4 {
margin-left: 33.33333333%
}
.col-lg-offset-3 {
margin-left: 25%
}
.col-lg-offset-2 {
margin-left: 16.66666667%
}
.col-lg-offset-1 {
margin-left: 8.33333333%
}
.col-lg-offset-0 {
margin-left: 0
}
}
.navbar-default .navbar-nav > li > a {
line-height: 40px;
text-transform: none;
font-size: 16px;
letter-spacing:1px;
}
.navbar-nav > li > a {
padding-top: 18px;
padding-bottom: 18px;
}
.dropdown-menu {
font-size: 16px;
}
.btn {
border-radius: 0;
}
.well {
border-radius: 0;
}
.dropdown-menu {
border-radius: 0;
}
.copyright {
margin-top: 60px;
float: center;
text-align: center;
}
#colophon {
border-top: none;
}
.col-md-6 {
width: 100%;
}
div#logo, div#logo * {
max-width: 100% !important;
}
#page .navbar > .container .navbar-brand,
#page h1,#page h2,#page h3,#page h4,#page h5,#page h6,#page .h1,#page .h2,#page .h3,#page .h4,#page .h5,#page .h6 {
font-weight: 600;
font-family: 'Open Sans', serif;
letter-spacing: 1px;
}
.widget ul li {
list-style: none;
border-bottom: none;
/* border-bottom: 1px solid #F2F2F2; */
margin-bottom: 11px;
padding-bottom: 11px;
}
#footer-area ul li {
border-bottom: none;
/* border-bottom: 1px solid #fcf1f6; */
}
#footer-area .footer-widget-area a:hover{
color: #f36f2b;
text-decoration: underline;
}
.widget button#searchsubmit {
background: #36439b;
border-color: #36439b;
}
body.home .container {
width: 100%;
}
header.page-header {
display: none;
}
.btn-default, .label-default, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: #36439b;
border-color: #36439b;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.btn-default:hover,
.label-default[href]:hover,
.label-default[href]:focus,
.btn-default:hover, .btn-default:focus,
.btn-default:active,
.btn-default.active,
#image-navigation .nav-previous a:hover,
#image-navigation .nav-next a:hover, .woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
background-color: #f36f2b;
border-color: #f36f2b;
color: #FFF;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.post-inner-content {
padding: 45px 50px;
background-color: #fff;
border: none;
border-top: none;
}
body.archive .post-inner-content,
body.blog .post-inner-content,
.post-inner-content:first-child {
border-top: none;
}
a.osc_servicebox_readmore_css.btn.btn-lg {
background-color: white;
color: #36439b;
border: 2px solid #36439b;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 20px;
font-weight: 600;
}
a.osc_servicebox_readmore_css.btn:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background-color: #36439b;
color: white !important;
}
I don’t see anywhere the shared custom CSS code to centre navigation menu on your site so could you please tell me where you have added it?
Hi Movin, I used your code in the child stylesheet, it worked! 
Thank you so much for your help and patience! I hope you have a wonderful week!
It’s resolved, thanks Movin!
You are most welcome here
Hi Movin!
i proved that code to move the logo to the center and change the size and doesn’t work because on the mobile (safari) and Internet explorer the logo appeared cut to the right side. On Google Chrome was perfect that right.
Do you have other option to set the logo to the center of the page and change the size?
Thanks a lot!!
@sandracll Could you please share me your site URL where it’s happening and screenshot of the issue so that i can troubleshoot it?