How to remove white space and resize logo


Hi, I have 2 problems:

  1. How to remove the white space on my ‘Latar Belakang’ page under menu? I already try everything but can’t solve the problem. It happen on every page.

  2. How to resize logo on menu? I want to decrease the logo because the size is too big. I already try this code but nothing happen-

#masthead .site-branding img {
width: 1px;

This is my website:

Please help me asap, thanks!



please try this code in a simple css plugin or child theme:

.page-wrap {
  padding-top: 0 !important;
.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
  padding-top: 0 !important;
.site-logo {
  max-height: 50px !important;


Thanks! It’s completely nice!

Now, how can I adjust or resize or decrease the height of the menu bar? The logo is now become smaller but the size of menu bar is bigger.

Thanks again! :slight_smile:


You’re welcome!

Try out this:

.site-header {
  padding: 0 !important;


Hi, I tried the code but nothing happen… :frowning:


Problem solved! The words important is spelling wrong. Just copy your code without see the spelling. Thanks!

New question:

  1. How can I adjust the width of menu bar?

  2. How can I adjust the position of menu centred with logo? Because now, the logo is nicely centred but the menu words is more upside. I want to make sure the words centre with logo. So, the menu bar will be nice.

Thanks again!


Oh, I see. Just corrected it.

  1. What do you want to do exactly?

  2. Please try this:

@media and only screen (min-width: 768px) {
  .site-header .col-md-4, .site-header .col-md-8 {
    line-height: 50px;



  1. I mean, how to adjust if I want to move the logo more to the left and the menu text more to the right.

  2. I try the code but nothing happen. I already try to adjus the line-height and min-width but also nothing change.

Thanks. :slight_smile:


Another question,

  1. How to remove white space below call to action block and upper the footer widget that have edit link button.

You can see at this link:

Please help me as soon as possible. I’m trying hard to solve this but nothing happen.

Please answer all of my question. Thanks a lot. Love you Sydney team. :wink:


Sorry for the delay, I’m a bit busy.

  1. I will try to provide you some code for this tomorrow (in about 10 hours).

  2. Try this with the important! please.

@media and only screen (min-width: 768px) {
  .site-header .col-md-4, .site-header .col-md-8 {
    line-height: 50px !important;
    vertical-align: middle !important;

I will test another way tomorrow, too.

  1. I have a code snippet for that already. I will provide it tomorrow when I’m at the PC again.

Best regards,


Ok, thanks. I’m waiting for the solving.

But, for no.2, I try the code and also nothing change.


Which browser do you use? What is your screenwidth in pixel?

@media only screen and (min-width: 1023px) {
  .header-wrap .container {
    width: 1500px !important;

This should do the trick. Use a width you want.

#mainnav {
  margin-top: 20px;
@media and only screen and (max-width: 1024px) {
  .btn-menu {
    margin-top: 12px;
.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
  padding-bottom: 0 !important;
.content-area .hentry {
  padding-bottom: 0 !important;
.entry-footer {
  margin-top: 0 !important;

I hope that all of this works. It does for me in the firefox webdeveloper tools.
Please make sure you copy this in a simple css plugin or a working child themes style.css.

Best regards,


You Awesome!

All 1,2 and 3 are working nicely! Thanks a lot!

Where can I get full Sydney tutorial for me to create complete front page like yours? I found some tutorial in youtube but it doesn’t help me a lot. Especially for call to action section “Do you want to” and our work section that have many image.

Thanks WeAreOne. :slight_smile:


That’s great!

You can download the content from and import the file from your backend.


Thanks! It’s work nice now!