Change the style of the drop-down menu.

[Il Domandatore]

I have half of the menu that on hover, the submenu appears. I wish they were like the rest, that is, click on the menu to see the submenu.

I've tried using Chrome's developer tool, but most of the features don't change.

[JMRKER]

Show what you have attempted so far.

Best way to get help is to make an attempt.

BTW, welcome to the forums.  :)

 

[Il Domandatore]

I used a WordPress theme and I know a little about CSS and HTML basics. In fact I managed to make 2 changes myself and I will make some. If you tell me how to do, it is possible for me to understand how to change the settings at will.

Unfortunately I get confused looking at an entire site.

https://oldfreegame.com

[smus]

You just need to deactivate what is written for :hover in CSS file. 

Try looking for it inside your style.css file for your active WP theme. It should be in the WP theme folder

[Il Domandatore]

Where do I find the CSS files? I didn't understand what to do, I'm a beginner.

[Il Domandatore]

You say it's too much to focus on readability 0 on the Hemingway app?

Why if I modify with the developer tool the changes work and with the custom CSS in the theme do not?

 

.switcher a {
    text-decoration: none;
    display: block;
    font-size: 24px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

 

[dsonesuk]

Did you clear cache and reload? Ctrl F5.

[Il Domandatore]

When I hit select an element, the block option returns to none.

[dsonesuk]

What? Does that mean??????, I'm guessing you have a possible blur event happening, when you select inspect in dev tools, it loses focus and reverts to display: none; IF that is what you mean?

[Il Domandatore]

I am using the theme Oceanwp and I use a mild effect to pop up and vanish submenu. I see the submenu putting the Block, but to see the information on the instrument developer, I have to click with the option to inspect the items. it is from that moment that display returns to None.

[dsonesuk]

select the element, then go to dev tools and within the styles pane you should see :hov, that shows the pseudo types for hover: :focus etc, select each of those and see what happens to the styling for that element, it will probably show block now! for focus selection.

Edited February 3, 2021 by dsonesuk

[Il Domandatore]

Okay, I try the reverse solution, it should work. I go to attempts.

[Il Domandatore]

I changed from the Oceanwp theme, custom CSS, the display to block, but it behaves exactly the same as with the Chrome developer tool. Display: none;

I tried to change something else with the Chrome Developer Tool and as soon as I hover over it, the changes are removed. Strange...

Edited February 8, 2021 by Il Domandatore

[dsonesuk]

It might be adding a class on hover to override your changes, in that case you have to identify the classes and make changes including those classes.

[Il Domandatore]

You say I have the same settings with hover and this makes you forget the changes? Did I get it right?

 

I tried to change the height;

From so
{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 852px;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

to so

{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 33%;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

Edited February 8, 2021 by Il Domandatore

[dsonesuk]

No,  for example, by default it may have class of "state-default" then when hovered the class changes to "state-hover" using javascript. If these classes are not included in your css code, it may not be enough to override these classes.

[dsonesuk]

If you want them clickable see https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/ 

and undo what was done here.

[Il Domandatore]

I did not understand the meaning of this link; I need it to be clickable.

[dsonesuk]

Yes!... but! Its obvious seeing that you have classes as it describes THEY have been forced to be unclickable and use hover instead, therefore if you do the reverse and add the actual url and not! '#' and remove class it will revert to being clickable. Use what god gave you!

[Il Domandatore]

I already had this implementation and wordpress gives it this way.

 

I ask to have the hidden menu on hover. I press above and I see the list. This I can not do it.

Edited February 10, 2021 by Il Domandatore

[dsonesuk]

to so

{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 33%;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

 

what is selector?

If it is 'element.style, then no! it won't work! its inline css added to the actual element, if you edit this then yes! it will work, because you are editing inline css IT has highest precedence over any other css, inline or external.

Even if you used its selector of .nicescroll-cursors {}, the inline styling will still override it, Unless each styling property you needed to amend had !important placed next to it example: height: 33% Important; and !important was not included with the inline  property you needed to change.

[Il Domandatore]

<div id="ascrail2000" class="nicescroll-rails nicescroll-rails-vr" style="width: 44px; z-index: auto; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 1; display: block; background: rgb(192, 108, 254);"><div class="nicescroll-cursors" style="position: relative; top: 0px; float: right; width: 44px; height: 1024px; border-radius: 10px; background-color: rgb(255, 255, 255); background-clip: padding-box;"></div></div>

element.style {
    width: 44px;
    z-index: auto;
    cursor: default;
    position: fixed;
    top: 0px;
    height: 100%;
    right: 0px;
    opacity: 1;
    display: block;
    background: rgb(192, 108, 254);
}

Puoi farmi un esempio pratico sul codice precedente con importanti? Avevo provato a mettere questa opzione ma non ha funzionato. Ho fatto qualcosa di sbagliato.

Edited February 13, 2021 by Il Domandatore

[dsonesuk]

I don't know if you are actually using 'element.style' as a selector, but if you are DON'T, that just shows the inline styling for current selected element. You need to target the 'id' if available at very least. '#ascrail2000' or if not available the classes

'.nicescroll-rails.nicescroll-rails-vr' or to give more precedence

'#ascrail2000.nicescroll-rails.nicescroll-rails-vr'

Only target the css property you wish to change, the rest will just be duplication of the original.

#ascrail2000 {

background: yellow !important;

}

Edited February 13, 2021 by dsonesuk

[Il Domandatore]

I found that it also adds a sidebar to me at the bottom. With the chrome developer tool I found and deleted it. is a style element, how do I delete it and how do I know where exactly it is?

 

I tried to follow your lead with important, but I don't understand what I'm doing wrong.

# ascrail2000 .nicescroll-rails nicescroll-rails-vr {
     height: 33% !important;
}

https://i.postimg.cc/44BfgLqp/Schermata-2021-02-17-a-18-29-12.png

Edited February 17, 2021 by Il Domandatore

[dsonesuk]

1 hour ago, Il Domandatore said:

I found that it also adds a sidebar to me at the bottom. With the chrome developer tool I found and deleted it. is a style element, how do I delete it and how do I know where exactly it is?

I don't know? not a mind reader, I don't know what you are referring too.

id value should butt against the '#' as in  

#ascrail2000 

which is the same with class value but with '.'

.nicescroll-rails

ANY spacing between a selector refers to a child element of previous, BUT! all the id and class references are list on the same element so they don't refer to any child elements at all! So it should be #ascrail2000.nicescroll-rails.nicescroll-rails-vr (no spaces mean it refers to single element id and classnames used on that element)