CODEWITHSUNDEEP
htmlcss
Michael Douglas
Michael Douglas

Reputation: 11

Social Media Button Positioning

I want to place social media side menu on the side of an iframe

I've tried place the social media side menu within an tag that was placed in the same as the iframe.

<div>
    <p align="center"><iframe src="https://rucode.tumblr.com" width="1200" height="1400" align="middle" class="embeded-website"></iframe></p>
    <aside class="side-social-media">
        <nav>
            <ul class="vertical-menu">
                <li><a href="https://www.facebook.com/profile.php?id=100011425754260" target="_blank" class="fa fa-facebook"></a></li>
                <li><a href="https://twitter.com/Mike_doug11" target="_blank"class="fa fa-twitter"></a></li>
                <li><a href="https://www.linkedin.com/in/michael-douglas11" target="_blank" class="fa fa-linkedin"></a></li>
                <li><a href="https://www.youtube.com/channel/UCihoOa4CmCOFH_TE1-Utp-A?view_as=subscriber" target="_blank"class="fa fa-youtube"></a></li>
                <li><a href="https://www.instagram.com/mike_doug11/" target="_blank"class="fa fa-instagram"></a></li>
                <li><a href="https://www.snapchat.com/add/mike_douglas" target="_blank" class="fa fa-snapchat-ghost"></a></li>
             </ul>
         </nav>
    </aside>

<div>

When I do this the social media side menu is off to the side but its below the iframe.

Upvotes: 1

Views: 114

Answers (1)

murugan
murugan

Reputation: 46

You can use CSS bottom or top property like below

<style>    
    .vertical-menu{
        position: fixed;
        top: 0; /* or bottom: 0;*/
    }
<style>
<div>
    <p align="center"><iframe src="https://rucode.tumblr.com" width="1200" height="1400" align="middle" class="embeded-website"></iframe></p>
    <aside class="side-social-media">
        <nav>
            <ul class="vertical-menu">
                <li><a href="https://www.facebook.com/profile.php?id=100011425754260" target="_blank" class="fa fa-facebook"></a></li>
                <li><a href="https://twitter.com/Mike_doug11" target="_blank"class="fa fa-twitter"></a></li>
                <li><a href="https://www.linkedin.com/in/michael-douglas11" target="_blank" class="fa fa-linkedin"></a></li>
                <li><a href="https://www.youtube.com/channel/UCihoOa4CmCOFH_TE1-Utp-A?view_as=subscriber" target="_blank"class="fa fa-youtube"></a></li>
                <li><a href="https://www.instagram.com/mike_doug11/" target="_blank"class="fa fa-instagram"></a></li>
                <li><a href="https://www.snapchat.com/add/mike_douglas" target="_blank" class="fa fa-snapchat-ghost"></a></li>
             </ul>
         </nav>
    </aside>

<div>

Upvotes: 1

Related Questions