Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #17932

    Hello,

    In cross-testing a site recently I found that the navigation is colliding with the logo and I can figure a workaround via CSS.

    Here is a link to the Coherence install: http://www.handhousing.org

    At around 800 pixels screen resolution, you can see that the “HOME”, “ABOUT” & “MEMBERS” navigation links are overlapping the logo.

    Also, you will notice that the four buttons (in the 4 column layout) below the home page slideshow are not showing with 100% width.

    Could you please provide guidance on how to fix these two issues? I tried to solve with different div combinations in the header.php file to separate (and clear) the elements but that would not work based on my attempts. I have since reverted to the original header.php file.

    Otherwise this theme is amazing, but these two problems present a major issue for the site.

    Thank You So Much!

    Seth

    #97575

    Hi!

    Try to add following code to css/custom.css:

    @media only screen and (min-width: 768px) and (max-width: 820px) {
    .logo img { padding-top: 0 !important; }
    }

    This code will push the logo towards the top and there’s enough space for the menu links.

    Regards,

    Peter

    #97576

    Peter,

    First off, HUGE thanks for the quick reply! You folks are SO on it =)

    I was easily able to use the @media query to get the desired results with a couple additional tweaks to the logo image size. Thank you so much for that!

    Do you think there is another way to solve this with a new DIV combination that would keep it from happening in the first place, say, when someone with a larger screen size re-sizes (shrinks) the size of their browser window?

    Also, can you suggest any solution for the image buttons below the homepage slideshow? Problems are occurring with the four column image layout them in Firefox, and if you would believe it, newer standards compliant versions of IE but not older ones.

    Please Advise

    Seth

    #97577

    Hey Seth,

    I’m not getting any issues when testing in IE or Firefox on your site. What specifically is happening and can you give us OS version and specific Browser versions? A screenshot in each would help as well.

    Regards,

    Devin

    #97578

    Hey Devin,

    I’m having the same issue with the Coherence theme on my iPad2 when placed vertically. The first two buttons in the menu overlap the logo.

    I believe the code you listed above should solve this issue? However, I am unsure where to paste it. I know that the quick.css is at the bottom of the styling tab, but where do you paste where do i find the custom.css file to paste this code?

    Thanks,

    Danne

    #97579

    Hi Danne,

    You can put into either the Quick CSS or in the themes css folder in the custom.css file.

    Regards,

    Devin

    #97580

    Unfortunately putting the code into the Quick CSS hasn’t made a difference.

    http://www.infusehairdesign.com/newwp, As I mentioned the menu overlaps the logo when iPad is placed vertically. I’ve taken a screen shot, but don’t know how to put it into the post.

    Thanks,

    Danne

    #97581

    Hi!

    You can try followin code:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .main_menu{
    width: 90% !important;
    }
    }

    Maybe you need to adjust the width value – eg set it to 80%

    Best regards,

    Peter

    #97582

    Got it! Actually I set it to 70%, works perfectly!

    Mahalo,

    Danne

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Coherence Responsive Layout Problem with both Navigation & Column-Based Images’ is closed to new replies.