While working on a webpage design, I encountered an issue with creating a header that includes a scrolling div element when the content overflows. You can view the code here. Within this code, there is a categories div featuring 'Home, News, Movies,...". However, when resizing the viewport width, the desired scrollbar does not properly function as expected within the div.
What could be causing this problem? Is there a solution to fix it?
The issue revolves around the styles applied to the categories ul element:
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
To resolve this problem: it is recommended to transfer these styles to the ul.categories li selector
let header = document.querySelector('header');
let logo = document.querySelector('header nav .logo');
let category = document.querySelector('header nav .category');
let topCategories = document.querySelector('header nav ul.categories');
let topSearchBtn = document.querySelector('header nav button.search');
function init(){
//adjust the width of the categories:
let width = logo.offsetWidth + category.offsetWidth + topSearchBtn.offsetWidth + 50;
topCategories.style.width = 'calc(100% - ' + width + 'px)';
}
init();*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
html, body{
height: 100%;
width: 100%;
background-color: white;
color: black;
font-size: 1rem;
}
button{
border: none;
cursor: pointer;
-webkit-tap-highlight-color: none;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
max-height: 100px;
min-height: 40px;
background-color: rgb(255,255,255);
box-shadow: 0 1px 20px rgba(0,0,0,0.1);
padding: 0 10px;
z-index: 1000;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
header nav .category{
background-color: rgb(180, 0, 99);
color: white;
height: 30px;
max-width: 250px;
align-self: end;
display: flex;
padding: 0 8px;
border-radius: 5px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
ul.categories{
list-style: none;
overflow-x: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
ul.categories li{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 24px;
text-transform: uppercase;
}
ul.categories i.fa{
margin-right: 5px;
}
header nav .search{
font-size: 22px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
width: 50px;
height: 50px;
background-color: rgb(3, 78, 238);
color: white;
transition: 0.3s;
margin: 0 0 0 10px;
}
header nav .search:hover{
background-color: white;
color: rgb(3, 78, 238);
} <header>
...
</nav>
</header>I'm currently working with an angular slider that is set to TRUE/OPEN by default. The issue I am facing is that while I am able to slide it using angular animations in one direction, I am unable to see the transition when sliding it back. Any assistan ...
I have a slider range that I'd like to modify using JavaScript. Specifically, I want to change its background-image property. To achieve this, I attempted the following script: document.getElementById("range").style.backgroundImage = "linear-gradient ...
I've been scouring the web for hours, but I can't seem to find a solution. Can someone please assist me in resolving this issue? Issue: I integrated angular-datatables within an md-tab using Angular material. Everything was running smoothly unti ...
My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...
Seeking validation for phone numbers based on specific conditions: - If all 10 digits are identical, show an error message. - If it begins with the number 1, display an error message. Have you encountered a similar scenario? Please share your sug ...
Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...
Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...
This is a piece of code I have written if ($result!==false) { $html_table =<table align="center" border="1" cellspacing="0" cellpadding="10" width="1000" word-wrap="break-word" display="inline-block"> <tr><th>Bank</th><th>Pro ...
Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...
I am experiencing an issue where my login screen does not scroll on PC, but when accessed on mobile, it starts to scroll. I have tried implementing various solutions recommended in other threads on this platform, but unfortunately, nothing seems to be work ...
My goal is to extract data from , specifically focusing on the placement and points earned by a specific player. Upon inspecting the HTML code of the website, I located the details related to the player "Nickmercs" as follows: HTML Text The rank was displ ...
Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like ­. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...
Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...
Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...
Is it supposed to work in theory? I'm attempting to float this box to the right on a row with 3 columns. What am I doing incorrectly here? Here is a pen: https://codepen.io/lucky500/pen/JbMMby <div class="container"> <div class="row"> ...
I am attempting to create a Vue component that displays an image, opens a modal with a second image, and then replaces the first image with a third one. The first and third images work as intended, but the image in the modal never updates. It keeps reusing ...
Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...
I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...
Can the background color be set to white using md-colors in angular material without creating a custom white palette? I attempted to use the grey palette based on information from the documentation, where it states: background - grey (white is included ...
<form> <div class="container"> <div class="row"> <div class="col-xs-3 col-lg-2"> Choose a bank </div> <div class="col-xs-3 col-lg-3"> <input id="Text1" type="text" class="form-c ...