CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 109

Why are my social media icons going off screen?

I'm trying to get my social media icons in the top right corner of the header bar. However, when I try to "float: right;" them, they appear to go too far off the screen. When I try to correct this with "position:absolute;", nothing happens.

You can see the problem below.

Before I float:right; them: enter image description here

After I float:right; them: enter image description here

My site is invictus-together.com if anyone wants to go and inspect the page.

Below is the CSS I have so far:

header {
    margin-top: 10px;
}

#masthead {
    background-color:black;
}

/*social media*/
.site-branding::after {
    content:"";
    clear:both;
    display:block;
}

.site-branding .widget {
    margin-bottom:0;
}

#sfsi-widget-2 {
    float:right;
    top:0;
    position:absolute; 
    right:0;
}

.norm_row_sfsi_wDiv_shuffle {
    position: relative !important;
}

/*logo*/
.site-logo {
    margin-top: 20px;
    margin-left: 20px;

}

.site-logo a img {
    margin:0;
}

/* Main Navigation */


.main-navigation {
  clear: both;
  display: block;
  float: none;
  text-align: center;
}

.main-navigation li {
  display: inline-block;
  float: none;
}

.main-navigation a {
  display: block;
  font-size: 22px;
  font-weight: 700;
  padding: 0 20px;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
}

Edit: Here is the HTML:

<body <?php body_class(); ?>>
<div id="page">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'invictus' ); ?></a>

    <header id="masthead" class="site-header" role="banner">
    <div class="container">
        <div class="site-branding">
            <?php dynamic_sidebar('header'); ?>
        </div><!-- .site branding -->

        <div class="site-logo">
            <a href="invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/invictus-together-logo-white.png"/></a>
        </div><!-- .site logo -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'invictus' ); ?></button>
            <?php wp_nav_menu( array('theme_location' => 'menu-1', 'menu_id' => 'primary-menu') ); ?>
        </nav><!-- #site-navigation -->

        <div class="login-section">
        </div><!-- .login-section -->
    </div><!-- .container -->
    </header><!-- #masthead -->
</div>

Upvotes: 0

Views: 313

Answers (3)

alex067
alex067

Reputation: 3301

When using position: absolute, you need to follow it up with a position: relative on the parent element.

So if you're social media icon elements are inside :

<div class="top-header">
   <div class="top-header-social">
   ...your icons...
   </div>
</div>

Your "top-header" class should have:

.top-header{

    position:relative;
    width: 100%;

}

That makes the parent element of your social media icons expand the full width of the page, and the position relative means that the child elements of top-header, will use top-header as it's area to position itself.

Really, a much easier way to do all of this is just use flex.

<div class="social-media">
  <img src=".. your icons.."/>
  <img src=".. your icons.."/>
  <img src=".. your icons.."/>
</div>

.social-media{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items:center;
}

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Remove position:absolue from shuffle class and you don't need to give float:right.

Upvotes: 0

Wimanicesir
Wimanicesir

Reputation: 5122

When you use absolute, you have to specify a position as well. Possible options are top,bottom, left and right.

In your case:

.wrapper-icons {
  position:absolute;
  right: 10px;
  top: 10px;
}

Also make sure that your header is position: relative to have the correct absolute position!

Extra source: https://www.w3schools.com/css/css_positioning.asp

Upvotes: 0

Related Questions