How to center a rotated
with a fixed position?

Question

I am trying to horizontally center a fixed and rotated div (orange square). The div should be sticked to the navigation bar and should be responsive. I have tried for a long time but I can't seem to find the right solution. The code I have at the moment is provided below.

Hopefully some of you have the right answer. Thank you in advance!

(P.s. I just joined stackoverflow and everything is still new to me. :P )

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My test website!</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <section id="nav">
        <div class="navbar"> <!-- Navbar Section -->
            <ul id="navcontent">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#about">About</a></li>
                <a href="#" class="navbarlogo"><img src="img/logo001.png" width="auto" height="40px" alt="Logo"/></a>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a>
            </ul>
            <div id="navsquare">
                <div>
                    <div class="navsquare"></div>
                </div>
            </div>
        </div>
    </section>
    <section id="header"> <!-- Header Section -->
        <div class="header">
            <img src="img/photo002.jpeg" width="100%" height="650" alt="Header image"/>
        </div>
    </section>

CSS:

    #nav {
        z-index: 30;
        position: fixed;
    }

    #header {
        z-index: 10;
        position: relative;
        height: 650px;
    }

    .navbar {
        background-color: #fb7507;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 63px;
        text-align: center;
        box-shadow: 0px 5px 50px #222;
    }

    #navcontent {
        display: inline-block;
        list-style-type: none;
        margin: 0px 0px 0px 40px;
        padding: 0;
        text-align: center;
    }

    .navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;
        position: fixed;
        left: 50%;
        right: 50%
    }

Screenshot:

http://prntscr.com/b04gty

Welcome to StackOverflow :) So the problem you would like to be solved is the horizontal position? Or where exactly is the problem? — Chris, May 04 '16 at 12:02

score 0 · Answer 1 · answered May 04 '16 at 12:09

use this css

 .navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;           
        display: inline-block;

instead of your

.navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;
        position: fixed;
        left: 50%;
        right: 50%
    }

score 0 · Answer 2 · answered May 04 '16 at 12:09

You just change your .navsquare class style

.navsquare{
   height: 115px;
   width: 115px;
   background-color: #fb7507;
   border-radius: 5px;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   box-shadow: 0px 5px 50px #222;
   position: fixed;
   left: 0;
   right: 0;
   margin: auto;

}

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

This is a common problem, you can also find the answer here: Center a position:fixed element

The solution is to add a right: 0;, left: 0; and a margin: 0 auto to your .navsquare. This would end up as follows:

CSS

.navsquare {
    height: 115px;
    width: 115px;
    background-color: #fb7507;
    border-radius: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    box-shadow: 0px 5px 50px #222;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Furthermore, you can also use negative margin. Here you use the left: 50%; and a margin-left: half-of-div-width;. This is slightly more complicated in your situation because of the angle of your div, but it's possible with some simple calculation:

CSS

.navsquare {
    height: 115px;
    width: 115px;
    background-color: #fb7507;
    border-radius: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    box-shadow: 0px 5px 50px #222;
    position: fixed;
    left: 50%;
    margin-left: -58px;
}

edited May 23 '17 at 12:07

Community

1
1

answered May 04 '16 at 12:10

Remco van Os

150
14

Thank you man! The first css snippet really helped me out! Uhm I don't know if it is possible but can you send private messages to people aswell? – Kabouterblokje May 04 '16 at 12:25
Glad to hear I helped you! You can not send private messages, see this link for more info about it: http://meta.stackexchange.com/questions/431/any-way-to-send-a-personal-message-to-another-user – Remco van Os May 04 '16 at 15:29
Ah that's a shame :| Would you like to share contact information though? – Kabouterblokje May 05 '16 at 13:01
Why? Is there anything you would like to ask me or just friends? – Remco van Os May 05 '16 at 20:11
Hmmm just friends I guess. I suppose your dutch as well and I like to get to know new people, especially ones with skills :P – Kabouterblokje May 13 '16 at 18:41
OK, I am dutch indeed, but how? – Remco van Os May 16 '16 at 13:17

How to center a rotated with a fixed position?

3 Answers3

How to center a rotated
with a fixed position?