[Solved] How insert a navbar inside a or any other element?

by


While it’s true that you can’t nest an element within an actual textarea element, that doesn’t mean the task as described isn’t capable of being accomplished, simply look at the textarea you type answers in here with.

What I recommend for your goal is to create a wrapper div (let’s call it textarea-with-nav), insert your nav-bar and a textarea into that div, and style it that way. Below you will find a minimal example of this with the resize disabled.

html, body {
	margin: 0;
	height: 100%;
}
.primary-content {
	padding-top: 55px;
}
.navbar {
	grid-area: header;
	overflow: hidden;
	background-color: #333;
	width: 100%;
        z-index: 1;
}
.navbar.site-nav {
	position: fixed;
	top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
	color: white;
	padding: 8px 16px;
	text-decoration: none;
}
.navbar ul li a:hover {
	background-color: #555;
	color: white;
	height: 100%;
}
.textarea-with-nav {
        transform: translate(50%);
	width: 400px;
	height: 300px;
	position: realtive;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
	border: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 396px !important;
	height: 246px !important;
	resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }
<div class="navbar site-nav">
	<ul>
		<li><a href="#">teste1</a></li>
		<li><a href="#">teste2</a></li>
		<li><a href="#">teste3</a></li>
	</ul>
</div>
<div class="primary-content">
	<div class="textarea-with-nav">
		<div class="navbar">
			<ul>
				<li><a href="#">teste1</a></li>
				<li><a href="#">teste2</a></li>
				<li><a href="#">teste3</a></li>
			</ul>
		</div>
		<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat lacus nisi, eu pretium mi lacinia tempor. Nullam sit amet congue justo. Pellentesque non enim volutpat, vestibulum lacus sed, lacinia est. Duis tempus tincidunt lectus non cursus. Vestibulum tempor, velit sit amet ullamcorper congue, nisl urna consequat sem, eu fringilla tellus lorem suscipit lectus. Integer vel scelerisque dolor. Praesent vulputate diam laoreet auctor tristique. Curabitur venenatis odio tincidunt felis elementum, eu lobortis elit fringilla. Vestibulum lacus arcu, euismod ut lobortis sit amet, vehicula sit amet massa. Etiam quis enim et arcu ullamcorper ullamcorper. In eu lacus dolor. Fusce at vestibulum sapien. Etiam at nisl ut purus molestie euismod vel et urna.

Fusce maximus arcu eget diam efficitur, ut dignissim ipsum ultrices. Duis est magna, dapibus vel pharetra vitae, tincidunt et ligula. Nam dapibus blandit nisi, eget ultricies magna tempor ac. Proin euismod, ipsum quis malesuada mollis, magna libero elementum nisl, et ullamcorper enim nulla vitae lectus. Nulla facilisi. Etiam at aliquam justo. Cras ut sollicitudin eros. Nam vitae sapien commodo, condimentum justo aliquam, sodales justo. Maecenas eu odio placerat, tincidunt lectus non, dapibus felis. Aliquam in cursus dui, sed dictum lectus. Phasellus tincidunt facilisis gravida. Donec augue mauris, elementum id lobortis sed, commodo vel metus. Sed sit amet sollicitudin diam.</textarea>
	</div>
</div>

5

solved How insert a navbar inside a