Logo issues in elegance theme

resolved (6 posts) (2 voices)

  1. gregdicristofaro
    Member

    I have a logo that is 693 px x 150 px at http://goodsam.community/. Without manipulating the skin, there is not enough room in the header so that the logo shows properly. The menu buttons start overlapping the logo. Also, in the mobile version of the site, the logo does not resize properly so that it fits the width of the page. I have attempted to fix the problem (i.e. set the header height to 180px, set the logo max width to 90%, etc.), but these fixes seem more like halfway solutions rather than fixes to the problem. For instance, in the mobile website, while I have fixed the problem so that the logo's width is set to the width of the page, there is a huge gap caused by the 180px header height. Beyond that problem, use of the skin editor directly causes this styling to be overwritten. What would be the ideal solution to this problem? Thanks,

    Greg

    Posted 2 years ago #
  2. Elliott
    Support

    Hello gregicristofaro,

    See here for displaying a smaller logo on mobiles, http://mysitemyway.com/support/topic/awake-responsive-questions.

    Posted 2 years ago #
  3. gregdicristofaro
    Member

    Thanks for the quick reply. Is there a way to get around putting in something like "#header {height: 180px; }" to have the content not overlap the logo? I can put that CSS in and have the page render properly on the desktop version, but it has spacing problems on the mobile version.

    Posted 2 years ago #
  4. Elliott
    Support

    You can use this CSS for mobiles.

    .mysite_responsive #header {  }
    Posted 2 years ago #
  5. gregdicristofaro
    Member

    OK. Thanks!

    Posted 2 years ago #
  6. gregdicristofaro
    Member

    Hello,

    I have been trying to find an elegant (no pun intended) solution to laying out the header properly. I put the whole of the header in a table and rerouted the header in these functions:
    //add_action( 'mysite_header', 'mysite_logo' );
    //add_action( 'mysite_header', 'mysite_header_extras' );

    to this function:

    function mysite_header_create() {
    	echo '<table><tr><td id="header_left">';
    	mysite_logo();
    	echo '</td><td id="header_right"><table><tr><td>';
    	mysite_header_extras();
    	echo '</td></tr><tr><td><div class = "header_widget_area">';
    	dynamic_sidebar( 'header_widget_area' );
    	echo '</div></td></tr></table></td></tr></table>';
    }
    </prev>
     
    and added the following css:
    .logo {
      position: static;
      line-height: normal;
    }
     
    #header {
      height: auto;
    }
     
    #header_inner table {
      margin:0px;
      padding:0px;
    }
     
    #header_left {
        width:100%;
    }
     
    .social_icon {
      display: table-cell;
    }
     
    .header_social .social_icon {
      float: none;
      padding-left: 0px;
    }
     
    .header_widget_area .widget {
      margin: 0px;
    }
     
    #header_extras, #header_extras_inner, .header_social {
      overflow: hidden;
      display: inline-block;
      padding: 0px;
    }
     
    .logo img {
      max-width: 600px;
      height: auto;
      width: 100%;
    }

    This enforces that the menu and body content stay below the header and the logo image resizes properly. So, I suggest this as potential alternative to the current structure, and I am also curious if there is any potential maintainability issue with this change. Thanks.

    Posted 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme