Full width bar with social media icons

Hi there,

The way your HTML is currently structured, you can get a full width bar by just adding background-color to your socialicons class. However, if you want the bar to be just the height of your social media icons, the easiest way is to move them to another div on top of your socialicons div. Then, you should probably rename both divs for the sake of semantics ??

Hope this helps!

Thank you for responding to fast fabianapsimoes!

I am new to this and don’t understand exactly what the coding would be to move the div on top of the social icons div. Do I have to add another document to the theme?
any further explanation would be greatly appreciated!

Thanks!

Hi again!

I’m assuming you are using one of the WordPress default themes, Twenty Eleven or Twenty Twelve. You should *not* make any CSS or HTML changes to these themes, because your changes will be gone whenever you update WordPress. In order to change how your website looks, you need to create a child theme.

Once you’ve done that, you’ll probably have to add a header.php file to your child theme. This file will be very similar to the header.php file you have now, but then with the changes to the `div’s I mentioned before.

It just occurred to me that another option is to, instead, add your social media icons as a text widget in the sidebar, and then move them to the header area using CSS. You’ll just need to add the following text there:

<a href="https://twitter.com/galavant2marvel">
<img src="https://www.galavantingtomarvel.com/wp-content/uploads/2013/07/twitter-logo-e1374086671200.jpg">
</a>
<a href="https://pinterest.com/galavant2marvel/">
<img src="https://www.galavantingtomarvel.com/wp-content/uploads/2013/07/pinterestlogo-e1374087298659.jpg">
</a>
<a href="https://instagram.com/galavantingtomarvel">
<img src="https://www.galavantingtomarvel.com/wp-content/uploads/2013/07/instagram-logo-e1374087796348.jpg">
</a>

If you add the widget, reply back here and I’ll help with the CSS to move it. Regardless of what you decide to do, you should create a child theme to apply the changes.

I appreciate your help so much, but I am still a little bit lost. I tried adding another div into the header but it didn’t seem to work. I put it right under the socialicons div, and nothing worked. Is there a code to put into css as well? Is there a specific way to write the code that I am doing incorrectly? Im sorry, I’m really slow with this. I don’t want to add a widget just yet because I would like it to be part of the css rather than just a widget.

Thank you again so much for all your help!

Your page’s source code looks the same to me. Considering you created a child theme, you should make sure that it is the child’s header.php that is being used. Try some simple tests, like removing some icons or adding a random text to the child’s header.php just to see if it’s being used or if you’re still loading Twenty Twelve’s header. If your file is not being loaded, try reading over https://codex.www.ads-software.com/Child_Themes#Template_Files to see if you missed something.

From what I tested here, changing the HTML like I mentioned and adding a background-color to the socialicons div should do it. This CSS bit would be like this, and should be added to the child’s style.css file:

.socialicons {
background-color: #000000:
}

You can then adjust “000000” to the color code you want to use.

Your child theme is not set up correctly – the style.css file should contain ONLY CHANGES – NOT a copy of the entire parent stylesheet. That creates duplicate code and makes it MUCH harder to manage your CSS. So start by correcting that.

You also have CSS errors in the CSS you’ve added – see:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.galavantingtomarvel.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Thanks for the help! i’ve been fixing the codes, and trying to work on that, however for some reason the background color is still not working. I inputed the exact code you created into the social icons div. I apologize for my ignorance, but I just cannot figure this out!!

Can you see where the problem is?
Again, I GREATLY appreciate the assistance!!!

My mistake: It should be a semi-colon instead of a colon there.

.socialicons {
background-color: #000000;
}

I guess I’ve been changing keyboard layouts way too often lately…

That CSS is not working at all because there is a missing closing bracket in the CSS just above it. This is one reason why you should remove all the duplicate CSS from your child theme stylesheet.

If you want that bar to be above the header and go all the way across the browser window, you need to change the HTML structure of the header.php…

hmm, think I got somewhere with it. Just need to figure out how to resize it to go only behind the icons. Thank you both so so much for all your help. It was an open bracket somewhere that fixed it. Any last minute suggestions would be appreciated, but you both have done so much!
Thank you again!!!

Hey fabianapsimoes, what would the div code be to put on top of the socialicons div? I think that will be the last step.

Thanks!!

If you want that bar to go all the way across the browser window, you’ll need to move the socialicons div section of code to above this line:

<div id="page" class="hfeed site">

Then you’ll probably need to change the CSS to work there – try this (not tested):

.socialicons {
    background-color: #000000;
    width: 100%;
    height: 70px;
}