Having trouble getting my headers to scroll with overflow auto and white-space nowrap. Can't figure out why it's not working.
I want to create hyperlinks within headers to link to specific parts of the website. I have the code for hyperlinking set up, but I'm struggling to keep all the content in the same line, especially on mobile devices.
Current look of the Headers: ! https://ibb.co/xhtXHF4
Desired look of the Headers, with a scroll bar but still in the same line: ! https://ibb.co/DLyzN0J
Tried adding overflow:auto and white-space:nowrap to the code but it's not taking effect. Any suggestions on how to achieve having all Headers in the same row with a scrolling bar when space is limited?
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
</script><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.pentaho-rounded-panel-bottom-lr {
display: none;
overflow: auto;
white-space: nowrap;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
a:link, a:visited{
background-color: #E1AFB3;
color: #030303;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover {
background-color: #C3414D;
}
</style><a href="#Header1">Header1</a>
<a href="#Header2">Header2</a>
<a href="#Header3">Header3</a>
<a href="#Header4">Header4</a>
<div id="Header1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header1" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 1
</div>
</div>
<div id="Header2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header2" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 2
</div>
</div>
<div id="Header3" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header3" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 3
</div>
</div>
<div id="Header4" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header4" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 4
</div>
</div>Appreciate any suggestions provided. Thank you.