Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools:

<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
    <ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
        <li class= "nav_trigger nav_open">
            <div class= "sub_panel" style= "left: 50px;"> == $0
            </div>
        </li>
    </ul>
</nav>

Simply need to change the left: 50px style to 76px. The issue lies in the fact that this attribute is stored under element.style in the developer tools, making it hard to target in my CSS file. Any suggestions would be greatly appreciated!

My attempt to target the specific element failed as I ended up selecting the main panel instead of the sub panel. Here's the code I used:

nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{ 
left: 76px; 
},

Answer №1

Make sure to pay close attention to your CSS selector. Based on the HTML you provided, your selector should be formatted as follows: Remove all commas and some spaces. When dealing with elements that have multiple classes, merge them together like this: div.class1.class2 (no spaces, just a dot between the class names). Remember, commas are used to separate selectors within the same rule, not to indicate child elements as you mistakenly did. If you're selecting an element by its ID, attach the ID directly to the element (Instead of nav #side_nav, use nav#side_nav).

nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel { 
  left: 76px; 
}

If needed, consider adding !important after 76px (but before the semicolon).

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

"Enhance user experience with autofocusing on form fields within an overlay

Despite spending hours searching, I can't seem to figure out a seemingly simple task. I am trying to set autofocus on a form field within an overlay that opens when a button is clicked. The overlay is implemented using basic jQuery overlay code. $(f ...

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...

Upon clicking on a different div, a div will elegantly slide down from above the footer

I'm struggling with sliding a div from the bottom of the page. Here is my JSFIDDLE Currently, when I click on the blue box (arrow-hover), the div slides up (box-main). However, to hide the div (box-main) again, I have to click inside the box-main d ...

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

Tips for displaying Japanese characters followed by numbers in a single line on a web browser using CSS

Combining Japanese characters with numbers without spacing can present formatting challenges. For example, with a string like "新しいフォルダ000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 ...

Tips on disregarding events within an html table

I have a see-through table with a width set to 100% that houses various HTML content. I am utilizing the table to properly center a particular element on the screen. However, the table is intercepting mouse events and preventing users from clicking on lin ...

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

I am attempting to create a unique icon by combining two different bootstrap icons together: https://i.stack.imgur.com/RWiQn.png Despite trying various margin adjustments like top and right, I have not been able to achieve the desired effect. Here is wha ...

Is there a disparity in how the mandatory field validator functions in Edge compared to Chrome?

https://i.sstatic.net/qUzDN.pngThere doesn't seem to be any red color https://i.sstatic.net/EqHyW.png How can I ensure consistency? Both elements should either have color or none at all. <form action=""> <input id="email" type="email ...

How to set DIVS to be hidden when the page first loads

I am currently working on a project where I need to use JavaScript to hide certain <div> elements when the page loads. I have also included jQuery in my code. Below is what I have tried so far: $(document).ready(function() { hide(); function hid ...

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using a ...

What is the best method for enclosing all text within an HTML document with a different element?

For example: FROM <div> whats up! <div> whats up2! </div> thank you for your help <div></div> </div> TO <div> <span>whats up!</span> <div><span> whats up2! </span&g ...

Adjusting the spacing between rows in Bootstrap 5

Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

Unable to transfer card from the top position in the screen

Utilizing Tailwind (flowbite) for the frontend of my project, I encountered an issue where the Navbar was overlapping the Card. I attempted using mt-8 to resolve the problem, but it did not yield significant changes. What adjustments should I make to achi ...

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...

Implementing a Timer on an HTML Page with JavaScript

I am looking to add a timer to my HTML page using JavaScript. The timer should get the selected date and time from an input field <input type="date" /> and control it. If the time difference between the current time and the selected time is less than ...

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

Is it possible to designate touch as the top finger and always have touch 2 be the bottom finger on the screen?

Is there a way to specify touch1 as the upper finger on the screen and always have touch2 as the lower finger, even if the lower touch is detected first? var touch1 = e.originalEvent.touches["0"]; var touch2 = e.originalEvent.touches["1"]; Can these ...