Help with Responsive Logo for Modular

pending (4 posts) (2 voices)

  1. CarsinGSD

    I've read and tried the instructions for adding the code to the header.php, but have not gotten results. This is my first website so I do not have experience. The Responsive & Mobile setting is: Make my site responsive on all devices. Everything works great on this site except the very frustrating logo!

    This is the custom CSS under General Settings for the Logo, which has it positioned where I want it.
    #header { height:178px !important; }
    .logo { position: absolute !important; top: -58px !important; left: -55px !important; }

    Attached is the logo with text.
    Please provide detailed instructions to make this responsive for all devices.

    Thank you!


    1. 1Screenshot_A-T_Logo.jpg (75.4 KB, 0 downloads) 2 years old
    Posted 2 years ago #
  2. Elliott

    Hello CarsinGSD,

    See here,

    Posted 2 years ago #
  3. CarsinGSD

    I was able to make the header responsive on my phone if it is held in the vertical position. However, if it is held horizontally, the header does not display properly. It will display OK on an iPad if held vertically, but it is horrible when held horizontally.

    I would like this header to scale as beautifully as the rest of the site does. And it does not. When viewed on a PC, Laptop or Apple Computer, all of the site content changes/scales according to the size of the window.

    What do I need to do to get the header to scale accordingly?

    This is the Custom CSS under General Settings:
    #header { height:178px !important; }
    .logo { position: absolute !important; top: -58px !important; left: -55px !important; }

    This is the Custom CSS under Responsive & Mobile:
    .mysite_responsive .logo { display: none !important; }
    #header { height:125px !important; }
    #header_inner {position: relative; !important; }

    Attached are examples of the header on different devices and also a copy of the code I used in the Header PHP.


    1. Responsive_Header_PHP_4_Mobile_w_Link_.jpg (55.2 KB, 0 downloads) 2 years old
    2. Small_screen_PC.jpg (90.9 KB, 0 downloads) 2 years old
    3. Horizontal_View_on_iPad.jpg (72.8 KB, 0 downloads) 2 years old
    4. iPhone_Vertical_View.jpg (64.3 KB, 0 downloads) 2 years old
    5. iPhone_Horizontal_View.jpg (69.7 KB, 0 downloads) 2 years old
    Posted 2 years ago #
  4. CarsinGSD

    What do I need to do to get this header to be responsive on all devices? Please see above screen shots.
    Sorry for double posting, but I've been stuck at this point and waiting for a response for over 2 weeks now.

    Would really like to get this issue resolved.
    Thank you for your help!

    Posted 2 years ago #


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