Executive Pro Responsive Header

Community Forums Forums Design Tips and Tricks Executive Pro Responsive Header

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  alanaburton 3 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #83395

    alanaburton
    Participant
    Post count: 44

    I have the website http://www.beautybynat.co.uk in Executive Pro but the header looks really bad on the mobile. I had thought that any non-responsive theme would do ok with the Genesis Responsive Header plugin by Nick the Geek which is still available to download but the usual settings to be supposedly found under Genesis >> Responsive Headers are completely absent. I have a fully up to date Genesis & Studiopress so in the absence of the plugin settings I can’t do anything with them.

    How do I get around this? Is a responsive header not considered fairly standard to have included on a theme these days?

    Also, on the mobile site the Facebook icon link disappears but the Twitter one shows – I assume this is to do with the bad formatting of the header and how it works on the mobile but how can I get the header to look nicer?

    Thanks!

    http://www.beautybynat.co.uk/
    #83403

    alanaburton
    Participant
    Post count: 44

    As a follow-up, I’ve since seen the responsive sizes nicely tucked away in the Appearance >> Themes >> Customise.

    I have added them there but again, nothing changes even though I’ve also removed the code I added previously.

    The “Contact Natalie + phone number” can remain the same but I don’t understand why it is not moved down slightly to accommodate the correct size header before it appears??

    #83431

    emasai
    Participant
    Post count: 788

    You added your Facebook and Twitter links into the menu and pushed them to the right with a margin-left: 350px, so when the screen is reduced in size, that big margin is still there. You would need to write a media queries rule for .css-facebook with margin-left: 0; for smaller screens. Or, just remove it altogether and have the Facebook and Twitter icons in the menu, they will then flow responsively as the menu is supposed to.

    For the “Contact Nathalie” it looks like you have added 2 divs with some inline styling to your text widget. You should just have one div or a p tag with a class name and put the css in the styles.css, that way it would be easier to style in the media queries. Due to its width it will have to have some margin added to push it down in media queries.

    Sorry I cannot tell you how to do this with the plugin, making a site responsive usually requires some knowledge of css.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #83562

    alanaburton
    Participant
    Post count: 44

    Thanks for you input so far!

    I do think the Facebook & Twitter icons looked nice where they were but to get the site looking nicer on mobile I’ve removed them as well as 1 of the divs for the contact information.

    I put an image with the contact details into the Header Right widget but even that is not responsive. The logo is too big and isn’t resizing so that’s one issue but for the moment it can be largely seen but it would be good to have the contact details at the top but even with finding the responsive header image upload section via the Dashboard (that doesn’t appear to work) the use of the top right widget should be avoided altogether if a responsive header is desired??

    Thanks again for help thus far,

    #119584

    alanaburton
    Participant
    Post count: 44

    Hello all,

    I still have this issue and am using it on another website that is currently still on a temp URL that also has this issue. I realise that apparently Nick the Geek’s responsive header plugin cannot be used effectively with the Studiopress Pro themes and that apparently I need to customise the header css in the media queries with variable logo sizes for the image to appear correctly on mobile and iPad etc. but I don’t understand why something so fundamental is not openly available for the Executive Pro theme – or any general Studiopress themes.

    I’m able to modify a css file but just need to know the code with which to do it.

    Thank you,

    #119967

    alanaburton
    Participant
    Post count: 44

    Hi, – Follow up and addition to last post:

    Can anyone let me know if the following media queries css code is correct for this site?

    @media only screen and (max-width: 250px) {

    .header-image .site-title a {
    background: url(http://www.beautybynat.co.uk/wp-content/uploads/2014/08/BeautyBYnatalie_logo250x64.png) no-repeat;
    height: 64px;
    width: 250px;
    }

    .header-image .site-title a {
    background-size: contain !important;
    }

    .site-title {
    font-size: 26px;
    font-size: 2.6rem;
    }

    The logo does (almost) show correctly but I’ve not long reduced it from 270px to 250px wide, changed the css code but nothing happens. Does it take a while to update or is this not the right code and has no relation to the fact that the logo manages to show up 90% correctly on an iPhone?

    Thanks,

    #119973

    alanaburton
    Participant
    Post count: 44

    In the absence of feedback I’ve re-uploaded the original css files and tried to start again.

    Previously I had modified things to get the logo to show up centered. This meant the responsive header logo code for some reason then did not work. Now the logo is in the default location on the left and the logo shows up well on the iPhone….

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

You must be logged in to reply to this topic.