adjust header so right hand widget area does not impinger on left side title are

Community Forums Forums Design Tips and Tricks adjust header so right hand widget area does not impinger on left side title are

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  worldviewpr 8 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #95387

    worldviewpr
    Participant
    Post count: 48

    I have been futzing with my title area in header and cannot figure out to solve issue where if any widget appears in the right title widget area, it forces the left hand title area from one line to two.

    the left hand header area is 380px and right hand is 725.

    I have tried changing the sizes of these areas

    I have tried changing the font px size of the title (don’t understand px to rem but usually it is same but with decimal (48px 4.8 rem)

    Please advise if there is a way of reducing the right side container to like 234px or google half banner size to allow title to remain one line

    http://halfwaytoconcord.com
    #95388

    cwalsh
    Participant
    Post count: 91

    I’m not sure if this is what you mean but there is padding on the .title-area. If you change it to 0 the top of the title text will line up with the top of Translate on the right.

    .title-area {
    float: left;
    padding-top: 30px;
    padding-top: 3rem;
    width: 380px;
    }

    Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

    #95389

    worldviewpr
    Participant
    Post count: 48

    see relevant default code below. In your response it looks at least the header image are is set to ’0′ but not sure that is what we are talking about.

    in title area below what line is it exactly that I would change to ’0′? I thought padding would be from top of page. Thanks for any clarification

    title-area {
    	float: left;
    	padding-top: 30px;
    	padding-top: 3rem;
    	width: 380px;
    }
    
    .header-image .title-area {
    	padding: 0;
    }
    
    .site-title {
    	font-family: 'Raleway', sans-serif;
    	font-size: 48px;
    	font-size: 4.8rem;
    	line-height: 1;
    	margin-bottom: 0;
    }
    
    .site-title a,
    .site-title a:hover {
    	color: #222;
    	font-weight: 900;
    }
    
    .site-description {
    	display: block;
    	height: 0;
    	margin-bottom: 0;
    	text-indent: -9999px;
    }
    
    /* Full width header, no widgets 
    ----------------------------------------*/
    
    .header-full-width .title-area,
    .header-full-width .site-title {
    	width: 100%;
    }
    
    .header-image .site-description,
    .header-image .site-title a {
    	display: block;
    	height: 0;
    	margin-bottom: 0;
    	text-indent: -9999px;
    }
    
    /* Logo, hide text */
    
    .header-image .site-header .wrap {
    	padding: 0;
    }
    
    .header-image .site-title a {
    	background-position: center !important;
    	background-size: contain !important;
    	float: left;
    	display: block;
    	min-height: 90px;
    	text-indent: -9999px;
    	width: 100%;
    }
    
    /* Widget Area
    --------------------------------------------- */
    
    .site-header .widget-area {
    	float: right;
    	text-align: right;
    	width: 725px;
    }
    
    .header-image .site-header .title-area,
    .header-image .site-header .widget-area {
    	padding: 40px 0;
    	padding: 4rem 0;
    }
    
    .site-header .widget-area p {
    	margin-bottom: 0;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.