I can't find the CSS code that controls the positioning of the social media icons in the header at https://mto2staging.mustangtraderonline.com/ it seems like it should be in the class called 'site-header' but i can't where in the coding. I want to move the social media icons to the top right instead of right in the middle of the header.
It's in the "wp-content/themes/journalistic/style.css?ver=5.2.2" on line 1710. .home-link { width: 100%; display: block } Code (CSS):
How does that control the placement of those social media icons? I must be missing something. Why are they in the middle of the header and how would I move them to the top of the header?
hi hope you fine you should remove padding in .site-header and .site-header { height: 460px; } Code (markup): also don't forget to change height in responsive
Each icon has this class="header-social-media-link". Notice text-align: center; With display: inline-block; you can use text-align to center items. a.header-social-media-link { display: inline-block; height: 40px; border: 2px solid #fab526; width: 40px; font-size: 21px; border-radius: 50%; padding: 3px; text-align: center; margin: 10px 5px; } Code (markup):
style.css file - the positioning is being controlled by the top/bottom padding - 170px .site-header { background: #1b1b1b; position: relative; width: 100%; margin-bottom: 3em; overflow: hidden; background-size: cover; padding: 170px 0 230px; }
Wow, I don't see that height parameter in the css file. that's what I was looking for. I'll have to look more closely.
That's because the monument to developer stupidity that is the typical turdpress template has sleazed that code into the markup... where STYLE has zero business even being. 99% of the time you see style="" and 100% of the time you see <style> in your HTML, you're looking at ignorance, incompetence, and ineptitude in action. It's not surprising you can't find or control anything -- by using the sleazy off the shelf wordpress markup, you've got over three times the markup and twice the CSS to deal with such a simple layout actually would need. Hence why it's vomiting up this 2.07k: <body class="home page-template-default page page-id-5 page-parent"> <div id="page" class="hfeed site"> <header id="masthead" role="banner"> <nav class="navbar lh-nav-bg-transform navbar-default navbar-fixed-top navbar-left" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="container" id="navigation_menu"> <div class="navbar-header"> <a href="https://mto2staging.mustangtraderonline.com/"> <div class="navbar-brand">Mustang Trader Online</div> </a> </div> </div><!--#container--> </nav> <div class="site-header"> <div class="site-branding"> <span class="home-link"> <!-- Social media links Start --> <!-- Facebook link --> <a href="https://facebook.com/mustangtraderonline" target="_blank" class="header-social-media-link"> <i class="fab fa-facebook" aria-hidden="true"></i> </a> <!-- Twitter link --> <a href="https://twitter.com/mustangtraderz" target="_blank" class="header-social-media-link"> <i class="fab fa-twitter" aria-hidden="true"></i> </a> <!-- Instagram link --> <a href="https://www.instagram.com/mustangtrader/" target="_blank" class="header-social-media-link"> <i class="fab fa-instagram" aria-hidden="true"></i> </a> <!-- Youtube link --> <a href="https://www.youtube.com/watch?v=LHCCREGT1sc" target="_blank" class="header-social-media-link"> <i class="fab fa-youtube" aria-hidden="true"></i> </a> <!-- Linkedin link --> <!-- Twitch link --> <!-- Pinterest link --> <a href="https://www.pinterest.com/mustangtrader/" target="_blank" class="header-social-media-link"> <i class="fab fa-pinterest-p" aria-hidden="true"></i> </a> <!-- Soundcloud link --> <!-- Social media links end --> </span> </div><!--.site-branding--> </div><!--.site-header--> </header> Code (markup): Doing the job of this 648 bytes: <body> <h1><a href="/">Mustang Trader Online</a></h1> <ul id="socialMenu"> <li class="facebook"> <a href="https://facebook.com/mustangtraderonline"> Facebook </a> </li> <li class="twitter"> <a href="https://twitter.com/mustangtraderz"> Twitter </a> </li> <li class="instagram"> <a href="https://www.instagram.com/mustangtrader/"> Instagram </a> </li> <li class="youTube"> <a href="https://www.youtube.com/watch?v=LHCCREGT1sc"> Youtube </a> </li> <li class="pinterest"> <a href="https://www.pinterest.com/mustangtrader/"> pInterest </a> </li> </ul> Code (markup): A simple "view source" of what Wordpress is vomiting up for HTML there should send any qualified developer recoiling in HORROR. Hence my advice would be to pitch that entire template in the trash and to start over clean... though good luck convincing Turdpress of that since such levels of derpitude are its bread and butter. "For people who know nothing about websites, BY people who know nothing about websites" is not a great plan of action for anything more complex than a blog for grandma. The only thing "outstanding" about that theme are the levels of scam artistry and unmitigated GALL "outstandingThemes" has in charging money for that crap.
Looks like I'll be changing the theme. Just trying to find a simple theme without all the extra plugins they come with and basterdation of the WordPress structure. There must be one out there.