Executive Pro Responsive Header

[alanaburton]

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/

[alanaburton]

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??

[emasai]

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

[alanaburton]

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,

[alanaburton]

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,

[alanaburton]

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,

[alanaburton]

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....

[Author]

Posts