• Hi everyone, sorry if this has been asked a million times but can’t seem the find the exact topic that matches my two questions.

    Can anyone help me remove the excess space between my banner and menu?

    And I made my front page static and am using a slider, so I’m not using a page title. But now there’s a big gap in between my menu and slider, can I remove this space where the title of the page is supposed to be?

    Thank you so much for any help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hey Tiffany
    Can you post a link to your site and ill have a look?

    Thread Starter Tiffany

    (@tiffanycyee)

    Oops forgot to include that, sorry. Here it is jonpfraser: https://www.sensuaw.org/

    Thank you.

    First off, you’ll need to create a ‘Child Theme’ for your site.

    https://codex.www.ads-software.com/Child_Themes

    Basically a child theme will allow you to make changes to the backend coding of your site without losing those changes if your theme ever gets updated.

    Once you have done that you can make changes to the CSS styling file that is found in the sub-menu of your WordPress Admin page labelled ‘Appearance > Editor’

    Inside the editor there will be a file called ‘style.css’ and this is where you can make changes to the styling of the site.

    In ‘style.css’ there is a section that looks like this at line 541:

    /* =Content
    ----------------------------------------------- */
    #page {
    	margin: 0 auto;
    	width: 1040px;
    	padding:0 20px;
    	background-color:#fff;
    	overflow: hidden;
    }
    .site-header {
      border-bottom:2px solid #4b4b4d;
    }
    .site-branding {
    	padding: 30px;
    	text-align: center;
    }

    To remove the padding between your header and the menu bar, change the value of ‘padding:’ under ‘.site-branding’ to:

    .site-branding {
    	padding: 30px 30px 0 30px;
    	text-align: center;
    }

    That will reduce the space between the logo and the menu bar underneath while maintaining the rest of the padding on the top and sides.

    Thread Starter Tiffany

    (@tiffanycyee)

    Thank you so much! That worked perfectly! Do you have any advice on how to remove the spacing between my slider and the menu?

    Make these changes inside ‘style.css’

    .content-area {
    	margin-top: 20px;
    	width: 70%;
    	float: left;
    	padding-right: 2%;
    	border-right: 1px solid #eeeeee;
    }

    To:

    .content-area {
    	margin-top: 0px;
    	width: 70%;
    	float: left;
    	padding-right: 2%;
    	border-right: 1px solid #eeeeee;
    }

    And separate out ‘.entry-content’ so its one its own as seen below:

    .page-content,
    .entry-content,
    .entry-summary {
    	margin: 1.5em 0 0;
    }

    to:

    .page-content,
    .entry-summary {
    	margin: 1.5em 0 0;
    }
    
    .entry-content {
    	margin: 0;
    }
    Thread Starter Tiffany

    (@tiffanycyee)

    Thank you, thank you! It worked great.

    Just make sure that you have created a Child Theme or all of that will be reverted once the theme updates.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Monaco] help removing padding and spacing’ is closed to new replies.