I am currently working on building a website. One of the key features I want to include is a fixed top bar that remains visible at all times. In this bar, I have added buttons, an image, and a headline. However, I am facing an issue where the headline keeps extending beyond the boundaries of the top bar, which is created as a div.
How can I ensure that my headline stays within the div and adjusts its size as the page size changes?
The code below shows the styling for my top bar (header-div), buttons, and the headline itself.
`.Header-div {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 7vh;
background-color: white;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
z-index: 9999;
}
.Kalender, .Info {
font-size: 1em;
width: 5%;
height: 75%;
margin-left: 2%;
margin-right: 0.1%;
margin-bottom: 5vh;
display: inline-block;
vertical-align: middle;
cursor: pointer;
white-space:
overflow: hidden;
text-overflow:
}
.Header1 {
position: fixed;
font-size: 2.5em;
font-family: sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
left: 30%;
right: 30%;
}`