Change header strip size for mobile and change social media icons footer

Dknowlton1 · August 2015

Hi there,

I've spent some time searching through previous discussions and can't find how to solve the following 2 problems;

1. How do I decrease the size of the black header when looking at the website on a mobile (see attached image)

2. How do I change the social media icons in the footer, I would like just: Facebook, Twitter, Linkedin, youtube and pinterest

My website is: kpsdigitalmarketing.co.uk

I look forward to hearing from you thanks!

Dan

Albert · August 2015

Hi,

1. To decrease space on mobile between logo and slider, you can use below css:

@media only screen and (max-width: 479px) { #Top_bar { height: 120px !important; } }

2. In the footer or in the content? Because the icons you presented on screenshot are a part of content.

Dknowlton1 · August 2015

Thank you, sorry I meant the footer, the screenshot was there to demonstrate problem number 1.

Albert · August 2015

Ok

So to change these icons, you must edit "Icon bar" item under Muffin Builder tool. But All icons included into theme you can check on http://themes.muffingroup.com/betheme/shortcodes/typography#icons

Dknowlton1 · August 2015

Thanks so Much you are awesome!!!

I have a couple more questions for you if that's ok?

1. When looking at my homepage from my iPhone everything is perfect as there is a black strip at the top with the logo ontop (see image 1 below)

However when I look on my iPad there is no black strip at the top which means the logo overlaps the social media icons and the White logo text does not show up well as there is no black strip behind. ( see image 2 below)

My question is how do I add the same black strip to the iPad/tablet version?

2. There is a white strip on the homepage between the black strip and the social media icons background below (see image 1 below). I know this is something to do with padding butI have tried changing the padding to 0pixels and this just edits the social media icons background padding..

My question is how can I remove this white strip so the top black strip and lower social media icons are 'flush' rather than being 'apart'?

Image 1

http://kpsdigitalmarketing.co.uk/wp-content/uploads/2015/08/image1.jpg

Image 2

http://kpsdigitalmarketing.co.uk/wp-content/uploads/2015/08/image.jpg

I look forward to hearing from you!

Albert · August 2015

1. You use "Overlay" header style which is kind of transparent menu and this can not be done with css. We got only one trick in this case. Personally, we do not like it but it works and it's the only way to do this:

@media only screen and (max-width: 959px) {
    #Subheader {
        border-top: 260px solid #000000;
    }
}

2. We do not see anything like this on our side. We checked the homepage and it definitely does not look like on your screenshot above.

Dknowlton1 · August 2015

Thank you, however I added this css to the customer css section and nothing appears to have changed? Any suggestions??

Thanks again!

Dan

Albert · August 2015

Did you added this code under Theme options > Custom CSS & JS > Custom CSS section? If yes, then maybe you don't see any changes because of cache? But if it's not cache, then please verify your custom css section because if there is even one mistake, above css won't work. Custom CSS section must be out of any errors and bugs.

Dknowlton1 · August 2015

Hello,

1. Yes I did upload the exact custm css into the right place (see image below)

http://kpsdigitalmarketing.co.uk/wp-content/uploads/2015/08/Error-image-2.png

2. I cleared my cache and all internet data on my ipad and loaded the website up again and nothing has changed (see image below). The white writing for the logo overlaps the social media icons and there is no black strip?

http://kpsdigitalmarketing.co.uk/wp-content/uploads/2015/08/Error-image-1.png

Do you have any other suggestions for me??

I look forward to hearing from you!

Dan

Albert · August 2015

Please send us private message with access to your dashboard so we can have a look on it because we are sure that you did something wrong.

Dknowlton1 · August 2015

Ok I have just sent you a private message through the contact form with my login details.

I look forward to hearing from you,

Daniel

Change header strip size for mobile and change social media icons footer

Comments