WordPress.org

Ready to get started?Download WordPress

Forums

Black Menu Line - Make wider (3 posts)

  1. sophie
    Member
    Posted 1 year ago #

    Hi!

    My website is betterdecoratingbible (dot) com

    The black line running across the top with my menu, i would like to extend it so that it is touching each end of the white body background. I would also like to center the header.

    How would I do this?

    Please be specific, I am not so good at html!

    Thanks!

  2. bethsoderberg
    Member
    Posted 1 year ago #

    To center the header, find this code in your style.css:

    #branding img {
    
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }

    and replace it with this code:

    #branding img {
    
    	border-bottom: none;
    	clear: both;
    	display: block;
    	margin: 0 auto;
    }

    To run the black line across the entire white space, there are two parts of your CSS you need to modify.

    FIRST find this code in your style.css file:

    #wrapper {
    	background: #fff;
    	margin-top: 20px;
    	padding: 0 20px;
    }

    and replace it with this code:

    #wrapper {
    	background: #fff;
    	margin-top: 20px;
    	padding: 0;
    }

    SECOND

    #access {
    	background: #000;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 940px;
    }

    and replace it with this code:

    #access {
    	background: #000;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 1020px;
    }
  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    @bethsoderberg Thank you for a detailed response, although you shouldn't edit the theme's files because:
    - Your modifications will erase them the theme updates.
    - Debugging becomes harder as you can't distinguish between modified and original styles.
    - You can compromise the theme.
    - You're more likely to have problems with CSS specificity.

    To circumvent this, we recommend using a either a Custom CSS Manager plugin that contains your CSS in a separate section of the dashboard, or for more complex changes (including CSS) use a Child Theme.

Topic Closed

This topic has been closed to new replies.

About this Topic