2
I’m studying ASP.NET MVC 5 and I’m trying to create a page where, in the upper left corner, I would have a "Menu" button, I was able to create the button and action, but I’m having trouble locating the button on the page.
I want this button to be at the top left of the page and not go down no matter how big the text is, but the way I’m doing it, as the text grows the button goes down.
HTML code:
@model WebApplication3.Models.MenuInicialModels
@{
ViewBag.Title = "Inicial";
}
<h1>TESTE 1</h1>
<h2>TESTE</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien sem, viverra sed semper non, elementum ut mi. Nullam quis rutrum nisl, non pharetra magna. Ut fringilla sollicitudin aliquam. Maecenas et felis non nibh consequat lobortis. Phasellus ornare sagittis tortor a dapibus. Pellentesque eget sapien condimentum, suscipit orci et, mollis lacus. Donec sit amet sodales arcu. Sed est urna, imperdiet ac sollicitudin at, posuere quis nibh. Integer sollicitudin gravida velit, non dapibus tortor accumsan eget. Praesent vitae eleifend nibh. Vivamus mollis sit amet tellus eu ultrices. Fusce in libero egestas, bibendum neque nec, porta dui. Sed sagittis posuere massa eget vulputate. Donec ipsum eros, congue et ante sit amet, finibus faucibus velit. Donec rhoncus vel mauris venenatis feugiat.
Duis metus enim, interdum vel nunc varius, iaculis placerat metus. Aliquam sagittis consequat magna, eu volutpat ipsum efficitur non. Nulla tincidunt vehicula metus, sed dignissim ligula tincidunt vel. Sed vitae nibh ac quam pellentesque varius in et neque. Vestibulum lobortis venenatis rhoncus. Integer maximus porttitor volutpat. Duis arcu orci, ultricies ut ullamcorper at, vulputate sit amet sem. Vivamus nec libero nec risus condimentum fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies dui et orci sagittis, quis maximus est gravida. Praesent quis sollicitudin nunc. Sed eu nunc aliquet, vulputate justo vel, iaculis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur neque ac ante porta congue.</h4>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="Open_menu">
<span onclick="openNav()">Menu</span>
</div>
CSS code:
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 50px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#Open_menu {
position: fixed;
z-index: 999;
cursor:pointer;
margin-left: -120px;
margin-bottom: 100px;
margin-top: -100px;
font-size: 20px;
}
Page:
Using the tag position: fixed the button, was in the fixed position when scrolling the page, but when it was added a larger text, the button went down:
It seems that it is "linked" with the footer, because it changes the value of the tag margin-top: the footer also accompanies the modification.
Places the html structure of the page...
– MagicHat
Do you want this button to float? Or obey the container? I don’t understand very well where it should be
– Vinicius Colares
I want him to stand still, in the upper left corner, below the blue bar
– Thomas Erich Pimentel
The way you edited the rule only occurs in mediaquerie, if you use this 1st solution you have to put out of the media...
– MagicHat
"How to position a Span tag on the page?" is a very vague question, and does not allow for a clear solution that helps other people
– Vinicius Colares