Is there a way to create a space on the navigation bar where the current tab is selected without making it the same color as the background?
In other words, I want the "My Page" tab (currently selected) to be transparent, but still show the background color instead of blending in with the navigation bar's color behind it.
Ensure to include an empty element to make this function. Confirm that none of the previous elements to your navigation section have a different background than the one you want visible behind your tab.
body {
background: #F58B73;
}
.nav-links {
display: table;
width: 100%;
table-layout: fixed; /* could use `white-space: pre` instead */
}
.nav-button {
display: table-cell;
width: 140px;
height: 30px;
padding-top: 10px;
padding-left: 20px;
background: #231F20;
color: #FFFFFF;
text-decoration: none;
}
.spacer {
background: #231F20;
width: 100%;
display: table-cell;
}
.nav-button-selected {
background: transparent;
}
<div class="nav-links pull-right">
<div class="spacer"></div>
<a href="#" class="nav-button nav-button-selected">Who I am</a>
<a href="#" class="nav-button">What I do</a>
<a href="#" class="nav-button">How to contact me</a>
</div>
Hello everyone! I am working with some devextreme code blocks and need help in changing the border color of a numberbox to red. Can anyone guide me on how to achieve this? import React, { useState } from 'react'; import { NumberBox } from 'd ...
Can anyone help me figure out how to add a vertical gutter between two rows with Bootstrap 5? I've tried using g-* and gy-*, but as shown in this jsfiddle, it doesn't seem to be working. Any ideas on what might be causing this issue? From my und ...
When a user accesses the website from a large screen device like a computer or smart TV, it will display controls optimized for that specific screen resolution. Conversely, when the user uses a mobile device to surf the same page, the controls will adjus ...
I'm facing an issue and I'm looking for a solution... Upon entering my homepage, I would like to display a popup image showcasing a new event so visitors can see it before accessing the website. I attempted to achieve this using JavaScript but w ...
I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...
I recently created a new page using Bootstrap 4.1.1, but I'm having trouble getting the banner image and navbar to stretch the full width of the page. You can view the live page here. Can someone help me pinpoint what's wrong in my code? I'v ...
Over the next few weeks, I will be working on transitioning my website content to have both a mobile and tablet version. During this process, I have some questions: What is the best way to redirect users to the correct site based on their device/browse ...
I need to align two block elements horizontally, one being a FORM and the other a DIV. <div id="miningArea"> <form id="curWorkForm">...</form> <div id="buttonDescription"> To start, click the "Start" button. < ...
I have a query that I need some assistance with. I've developed a random image generator which is working fine so far: var randPics = document.querySelector("#randPics"); var getPics = document.querySelector(".getPics"); getPics.addEventListener( ...
I'm looking to create a simple, lightweight feature where clicking on a "read more" link will reveal a paragraph, and then clicking on a "read less" link will hide it again. My knowledge of JS and JQuery is quite limited. I'm currently utilizing ...
I've been attempting to get Open Layers to function in my Eclipse web development environment, but I've encountered some challenges along the way. The setup instructions provided on the Open Layers website focus mainly on using npm. Nevertheless, ...
Hey there! I'm looking to align the divs with class="form-group" so that their labels are on top, rather than inline with the fields. Currently, they are stacking on top of each other like this: https://i.sstatic.net/rNoS3.jpg I want them to appear ...
How do I ensure all footers with a green background have the same height, while also keeping the content height consistent? Current result: https://i.sstatic.net/SrgFq.png Desired output: https://i.sstatic.net/4cr25.png CodePen: https://codepen.io/yas ...
In my search button, I have a cached list of options. When I select one, it should trigger the menu and choose the correct option. However, I am having trouble comparing the innerText of a div with the selected option from the search area. Both a and div e ...
I am facing an issue with my web layout where I have two elements that are supposed to occupy 25% and 75% of the screen height using Bootstrap 4's row directives. However, it seems like these directives are not affecting the height of the elements as ...
Can anyone help me identify the issue with this code? I am struggling to display the sub menu... I suspect the problem lies in the section where I retrieve the sub menu from the database. However, upon inspection, everything seems correct... It's po ...
Need help centering a span vertically within a div when using float:right? <div class="card"> <div class="card-header"> <h5>TEST</h5> <span class="fa fa-info"></span> </div> <div class="card-body" ...
Isn't it strange that my logo appears pixelated only on the home page, even though I used the same HTML and CSS code for all pages? The Html: <a href="Home.html"><img id="logo" src="../CONTENT/Images/Logo/1Sr2l8а.png" alt="logo"/></ ...
I am currently working on a unique section for a website that includes a .container-wrapper element consisting of text and multiple images. The container is set to have overflow: hidden; in order to prevent any overflow issues. However, the images within t ...
Being new to javascript, I've successfully combined two functions that control video playback, but they seem to be conflicting with each other. The first function is designed to offer custom pause and play controls for the video // VIDEO CONTROLS STA ...