CODEWITHSUNDEEP
htmlcssmenuposition
user3027864
user3027864

Reputation: 81

Move CSS menu to right of screen?

Im looking to reposition this drop down menu so that it is at the right side of the title, instead of its current location directly below it. I can't find the code in the css anywhere that is tying it to the left side of the screen?

enter image description here

index: 

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<title>Baking</title>
</head>
<body>

<h1>I want to bake </h1>

<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">...</a>
    <ul>
     <li><a href="#">Bread</a></li>
     <li><a href='#'>Brownies</a></li>
     <li><a href='#'>Cake</a></li>
     <li><a href='#'>ETC</a></li>
  </li>
</ul>
</nav>
</body>
</html>

stylesheet:

body 
{
    background-color: #1F2E2E;
}
h1
{
    color: #EEEEEE;
    font-family: "ADAM.CG PRO";
    font-size: 60px;
    margin-left: 40px;
}

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:right;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#EEEEEE;
    text-decoration:none;
    font-weight:700;
    font-size:55px;
    line-height:32px;
    padding:0 15px;
    font-family:"ADAM.CG PRO";
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#354343
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:0%;
    left:0;
    background:#1F2E2E;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:450px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

Any help would be greatly appreciated!

Upvotes: 1

Views: 3430

Answers (4)

tenhobi
tenhobi

Reputation: 2022

If you want to have your title at left and menu at right side of the webpage, you can use float.

If you want to have your menu next to your title, you should make them both display: inline-block; so they will be in the row.

Working example here: http://jsfiddle.net/n4L2t3gr/

Upvotes: 0

Lee
Lee

Reputation: 4323

Change float:left to float:right in your #primary_nav_wrap CSS.

Floating elements left or right, will align them, and break away from displaying as block elements.

But by default, and in regards to your question.. by default, all HTML items are left aligned, unless specified otherwise.

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

body 
{
    background-color: #1F2E2E;
}
h1
{
    color: #EEEEEE;
    font-family: "ADAM.CG PRO";
    font-size: 60px;
    margin-left: 40px;
}

#primary_nav_wrap
{
    margin-top:15px

}

#primary_nav_wrap ul
{
    list-style:none;



    margin-top:-100px;

}

#primary_nav_wrap ul a
{
    display:block;
    color:#EEEEEE;
    text-decoration:none;
    font-weight:700;
    font-size:55px;
    line-height:32px;
    padding:0 15px;
    font-family:"ADAM.CG PRO";
}

#primary_nav_wrap ul li
{
    position:relative;
    float:right;

}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#354343
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:0%;
    left:0;
    background:#1F2E2E;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:450px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

DEMO PAGE

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Try this snippet:

body 
{
    background-color: #1F2E2E;
}
h1
{
    color: #EEEEEE;
    font-family: "ADAM.CG PRO";
    font-size: 50px;
    margin-left: 40px;
}

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    float:right; /* changed to right */
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#EEEEEE;
    text-decoration:none;
    font-weight:700;
    font-size:55px;
    line-height:32px;
    padding:0 15px;
    font-family:"ADAM.CG PRO";
}
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">...</a>
    <ul>
     <li><a href="#">Bread</a></li>
     <li><a href='#'>Brownies</a></li>
     <li><a href='#'>Cake</a></li>
     <li><a href='#'>ETC</a></li>
  </li>
</ul>
</nav>

You have set float: left instead right to your #primary_nav_wrap ul

Upvotes: 1

Related Questions