Issue with creating a custom YouTube navigation bar positioned above suggested video content

bar image

Currently, I am attempting to recreate this navigation bar for my YouTube-inspired project. Although I have successfully made the background of the buttons fade using linear-gradient, I am unsure how to apply the same effect to the text itself. html:

#bar-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    font-size: 0.9rem;
    align-items: center;
    overflow-x: scroll;
    white-space: nowrap;
}
#bar-wrap .button{
    background-color: rgb(211,211,211);
    color: black;
    width: fit-content;
    height: 2rem;
    border-radius: 0.8rem;
    padding: 0.4rem;
    cursor: pointer;


    display: flex;
    align-items: center;
    justify-content: center;
}
<div id="bar-wrap">
  <div class="button" onclick="barActive(this)">All</div>
  <div class="button" onclick="barActive(this)">Source: Ixo Music</div>
  <div class="button" onclick="barActive(this)">Similar</div>
  <div class="button" onclick="barActive(this)">Live</div>
  <div class="button" onclick="barActive(this)">Recently Uploaded</div>
  <div class="button" onclick="barActive(this)">Watched</div>
</div>

I also attempted to use linear-gradient on the text but encountered some difficulties.

javascripthtmlcssyoutube

Answer №1

To achieve the desired effect, you should utilize a gradient overlay.

#bw1 {
  display: inline-block;
  position: relative;
}

#bw1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 75%, rgb(255 255 255 / 1) 100%);
  pointer-events: none;
}

#bw2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9em;
  overflow: auto;
  white-space: nowrap;
  width: 400px;
  overflow: auto;
}

.button {
  background-color: rgb(211,211,211);
  border-radius: 0.8em;
  padding: 1em 0.5em;
  cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#bw2::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#bw2 {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
<div id="bw1">
  <div id="bw2">
    <div class="button" onclick="barActive(this)">All</div>
    <div class="button" onclick="barActive(this)">Source: Ixo Music</div>
    <div class="button" onclick="barActive(this)">Similar</div>
    <div class="button" onclick="barActive(this)">Live</div>
    <div class="button" onclick="barActive(this)">Recently Uploaded</div>
    <div class="button" onclick="barActive(this)">Viewed</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access the latest data within Sails' Waterline prior to the update process

When using Sails' Waterline, I am tasked with comparing the previous value to the new one and assigning a new attribute based on certain conditions. For instance: beforeUpdate: function(newValues, callback) { if(/* currentValues */.age > newVal ...

javascriptnode.jssails.jswaterline

Populate a shopping cart with items using AngularJS

Greetings from an Angular newbie! I'm currently working on developing a shopping cart specifically designed for college students. The objective is to input the name and price of items into a text field and upon clicking a button, have the item added t ...

javascriptangularjsangularjs-directiveangularjs-scopeshopping-cart

Attempting to modify the element's value with the help of selenium

I am facing an issue while trying to change the element through Selenium. Despite using send keys and execute_script, the value remains unchanged. I am attempting to set the value to 'R'. driver.find_element_by_name('wlw-select_key:{actionF ...

javascriptpythonseleniumpycharm

How to properly escape JSON with hyphen or dash in AngularJS ngSrc

Having trouble displaying an image from a json url with dashes. I attempted to use bracket notation but it does not seem to be functioning: <img ng-src="{{image.['small-size'].url || image.thumb}}"> When using single quotes, my angular vi ...

javascriptangularjs

Fade in and out of page or div elements with a simple click

I've been dedicating some time to my recruitment website lately. As a beginner in coding, I'm looking for a script that will automatically fade out the Employment review content when clicking on each employment vacancy div and then fade back in w ...

javascriptjqueryhtmlcss

Acquiring data from a website using Python post user engagement

Hey everyone! One of my friends has a lot of typing to do for her IT classes in school. She needs to learn how to type quickly on the keyboard. Being quite lazy, she asked me if I knew of any way she could type her texts on without actually doing any wor ...

pythonhtmlweb-scrapingbeautifulsouppython-webbrowser

Changing the prototype of a generator function

TL;DR I am looking to enhance a generator function instance by adjusting its prototype, specifically the object received when calling a function*. Imagine I have a generator function: function* thing(n){ while(--n>=0) yield n; } Next, I create a ...

javascriptnode.jsecmascript-6generator

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Understanding the lockfile: deciphering the significance of each line in the yarn.lock file

I'm curious about the meaning of each line in this file. I encountered issues with packages due to dependencies in my project. After upgrading nuxt from version 1x to 2x, all tests started failing. After spending hours searching online, I discovered ...

javascriptnpmyarnpkgpackage-managerslockfile

Creating golden phone numbers from a numerical series using JQuery

My latest work assignment involves generating gold numbers from a number series such as 52xxxxxx. Gold numbers could be examples like 52999999, 52727272, or something similar. I'm feeling a bit overwhelmed and unsure of where to begin with this task. ...

jqueryhtmlrandom

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

Seeking advice on the most effective method to perform an "on cascade copy/insert" of linked elements within PostgreSQL. To better explain my scenario, I've crafted a straightforward example: Understanding the Database Structure Within the datab ...

javascriptnode.jsdatabasepostgresqlsequelize.js

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

javascripthtmlcss

Tips for updating a specific portion of a component in react.js

import React,{useEffect} from 'react'; import CloudTables from '@cloudtables/react'; import { useState } from 'react'; function DataGridTable ({ input1Value, input2Value }) { return ( <div className="con ...

javascriptreactjsdatatabledatagridjavascript-objects

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

javascriptjqueryhtml

Can you share tips for passing a variable from a post request to a function that accepts parameters as a string or an array of strings in Node.js?

I am struggling to insert the variable named query into the end of the prompt. I attempted to use template literals but it was unsuccessful. (async () => { const gbtResponse = await openai.createCompletion({ model: "text-davinci-002", prompt ...

javascriptnode.jsreactjsexpressvariables

Guide to sending SweetAlert textarea input to an axios call

I need assistance in creating a simple pop-up form stepper using SweetAlert. The purpose is to allow users to input a report name, description, and comment, then send that data to the server for storage. My challenge lies in retrieving the value from the ...

javascriptvue.jssweetalert

When a link is clicked, the text within an input field

Seeking a solution for inserting a value into an input when clicking a link, with the inserted value being the name of the clicked link. I am unsure how to achieve this. Can anyone provide guidance? The solution can involve jQuery, JavaScript, PHP, or any ...

javascriptphpjquery

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Would you be able to assist me with understanding why my anchor links are not functioning correctly? I have 3 anchor links, for example: Google (not working) Yahoo (not working) Facebook (working) Any insights on why Google and Yahoo are not working? &l ...

javascriptjqueryhtml

Implementing the sorting feature in Angular JS to properly align sub sections with their correct parent sections

I'm facing an issue with the functionality of my sample code. Users can add sections and subsections within those sections, which are sortable using ui-sortable. However, after sorting the items, if I try to add a new sub-section to Section 2, it wron ...

javascriptangularjsjquery-ui-sortable

Optimizing Safari for the Best Screen Size Experience

I seem to be encountering issues with optimizing my website. Everything appears to be working correctly in terms of widths, heights, margins, etc., on my laptop. However, when I view the site on an iMac or any other computer with a larger screen size, the ...

css