Support » Themes and Templates » [Theme: Twenty Eleven] Having multiple elements in header: improve positions?

  • Resolved artisana


    Hey there!
    I’m working on this site and I would love for the top of the header image to be in alignment wit the top of the social/contact elements on the right.
    Esssentially, is there a way to position the header image so that it is not *below* the right-floating elements above it in header.php? A way to align them differently?

    I hope so!

    Let me know if you know how I can accomplish this. My limited knowledge has only taken me so far…

    Thanks so much!


Viewing 2 replies - 1 through 2 (of 2 total)
  • For responsive design, it’s better to not use image that has text in it. Because image scales responsively, and the text won’t be readable at certain screen width.

    Under the current markups and CSS, this fix would do the job. It absolute positions the topinfo div in bigscreen and let it float in smaller screen.

    Take this out

    .topinfo {
    	clear: both;
    	margin: 0px 88px 0px 0px;

    Make another logo image for small screen, and put this code below in, replace the image path with your small logo.

    /*-----full size bg image-----*/
    html body.custom-background {
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-attachment: fixed;
    /*----position absolute the .topinfo div in big screen-----*/
    @media screen and (min-width: 1000px) {
    	.topinfo { position: absolute; right: 80px; top:-15px; }
    /*-----fix for small logo-----*/
    @media screen and (max-width: 1000px) {
    	#branding > a[href=""] img { opacity: 0; }
    	#branding > a[href=""] {
    		background-image: url("");
    		background-repeat: no-repeat;
    		background-size: cover;
    		background-position: center;
    		display: block; clear: both; margin-bottom: 20px ;
    	.call { margin-bottom: 20px; }

    The better way is to have 2 divs with size set in percentage and float in big screen collapsed in small screen like columns in RWD, but considering the current setup the above should just work.

    Thank you — That worked wonders! I appreciate the clear code you provided for me. Cheers!

    I will look more into RWD since that is the optimal route these days!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme: Twenty Eleven] Having multiple elements in header: improve positions?’ is closed to new replies.