I would appreciate some help with an issue I've come across whilst coding my blogger blog - http://www.blankesque.com.
I would like the tabs / 'page' links to appear on the right hand side of the screen. I have managed to do this with the three dropdown menu tabs / 'pages' links however the tab link which doesn't have a dropdown menu - titled 'contact' - doesn't appear alongside the other elements on the right hand side of the screen.
I have tried to add the following piece of coding to resolve this issue:
#wctopdropnav li{
float : right;
}
However another issue comes to light if I use the above stated coding. Although the tab does indeed appear on the right side of the screen, but the text/links for the other three tabs' dropdown menu options then also appear on the right side, but I would ideally want them to stay on the left side. Below I have included the entire navigation bar coding.
<style>
#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;
z-index:100;
top:0px;
left:0px;
position:fixed;
background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
}
#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
</ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
<li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
</ul>
</li></ul>
<li><a href='#'>Contact</a></li>
</div>
</div>
I have tried various different methods but to no avail, if anyone can aid me in solving this issue then I'd be extremely grateful.
Thank you in advance,
Iram