Hey there, I'm having a little issue with getting the password_photo_galleries to appear in the right place on my website. The only solution I've found is to add an extra button to the navbar to access that information. Ideally, I want the MyGallery button on the navbar to show both photo_galleries and password_photo_galleries when clicked. However, I'm struggling to combine these two functionalities into one button. Any help would be greatly appreciated! One idea I had was to create a drop-down under the My Gallery button with options for My Gallery and Password Gallery, but since my navbar is at a -90deg angle, I'm not sure how that would work out. Just a thought though. Either way, any solution will work fine. Thanks again!
#profile_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_password_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_photo_galleries:target {
right:80%;
margin-right:-520px;
}
#profile_password_photo_galleries:target {
right:80%;
margin-right:-520px;
}
.photo_gallery {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.password_photo_galleries {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.photo_gallery .heading,.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
... (Rest of the original code) ...
HTML CODE FOR THE NAVBAR
<div id="right_menu">
<a href="#profile_photo_galleries"><span>my gallery</span></a>
<a href="#profile_password_photo_galleries"><span>Password</span</a>***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>
here is the navbar , no links
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}