Docs

[vulpeshd]

Dear Support,

I want to set my site max width to a specific amount (like 1000 pixels), but I also want to move the header from the left site next to the content.
With images:
1: http://i.imgur.com/drD2rzn.jpg
2: http://i.imgur.com/kwY4zvg.jpg

Kind regards,
VulpesHD

[Rupok]

Hi there,

You can set the container width and max-width from Customize > Layout and Design. If you need further help; provide your URL.

Thanks!

[vulpeshd]

This reply has been marked as private.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (min-width:  980px) {
	body.x-navbar-fixed-left-active {
	   max-width: 1000px;
           margin: 0 auto;
	}
	   header .x-navbar-fixed-left {left: 175px;}
}

Hope it helps, Cheers!

[vulpeshd]

Its not exactly what I’m looking for.
It leaves a white bar on the left side of the navbar and when I resize the browser it stays there and not resizing properly like the content on the right side.

1 http://image.prntscr.com/image/ee0d490987554b75b2147283170d8a35.png
2 http://image.prntscr.com/image/c619bea4834a4982a126cd8200ef38ed.png
3 http://image.prntscr.com/image/997e4d1641cd4144be791b97b82ff627.png

[Jade]

Hi there,

Please try to add this code:

@media (min-width: 980px) {
    body.x-navbar-fixed-left-active {
        padding-left: 0;
    }

    .home .entry-content .cs-content {
        padding-left: 235px;
        max-width: 1000px;
    }  
}

Hope this helps.

[vulpeshd]

It looks better, but the site is not centered, its sticked to the left side of the browser.
http://prnt.sc/c7bdan

[Rupok]

Hi there,

let’s update the code a bit :

@media (min-width: 980px) {
    body.x-navbar-fixed-left-active {
        padding-left: 0;
    }

    .home .entry-content .cs-content {
        padding-left: 235px;
        max-width: 1000px;
        margin: 0 auto;
    }  
}

Hope this helps.

[vulpeshd]

This way the navbar stays on the left (sticks to the left side of the browser) and only the content gets resized, like as I update width on the “Layout and Design” page.

[Rue Nel]

Hello There,

Please update the css code and make use of this code instead:

@media (min-width: 980px){
  body.x-navbar-fixed-left-active {
    margin: 0 auto;
    max-width: 1000px;
  }

  .x-navbar-fixed-left, .x-navbar-fixed-right {
    left: auto;
  }
}

Hope this helps.

[vulpeshd]

Thank you very much for the help so far :), but it makes the content go under the navbar.

http://image.prntscr.com/image/80622978c5e04d31aa75d0e8400e85a8.png

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[vulpeshd]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for providing the details. Please update the css and use this instead:

@media (min-width: 980px){
  body.x-navbar-fixed-left-active {
    margin: 0 auto;
    max-width: 1000px;
  }

  .x-navbar-fixed-left, .x-navbar-fixed-right {
    left: auto;
  }
}

And then you also need to add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(window).on('load resize', function(){
    var site = $('.site').width();
    var win = $(window).width();
    var nav = $('.x-navbar').width();
    console.log('site: ' + site);
    console.log('window: ' + win);
    if ( win > 979 ) {
      var left = ((win - site) / 2 ) - (nav / 2);
      $('.x-navbar.x-navbar-fixed-left').css('left', left );
      console.log('Left: ' + left);
    } else {
      $('.x-navbar.x-navbar-fixed-left').css('left', 0 );
    }
  });
})(jQuery);

Hope this helps.

[vulpeshd]

Thank you so much for the help.
I’m very satisfied with the work of the support team 🙂

[Author]

Posts