Css problem with menu and submenu

I have a site in development:
https://destinopunilla.com.ar/beta2020

I have a main menu, and, when I move the mouse pointer over a menu option, the color change to yellow.. but, when I enter in a submenu, the color of the active menu option back to white.. How Can I do to stay that main menu option A and B in yellow while I navigate their submenus?

<ul id="menu-main-menu" class="...">
    <li id="nav-menu-item-43343" class="...">
        <a href="#" class=""><i class="nav-icon"></i><span class="menu-titles">OPTION A<span class="fa fa-angle-down"></span></span></a>
    
        <ul class="..." style="...">
            <li id="nav-menu-item-43392" class="..."><a href="#" class="..."><i class="nav-icon"></i><span class="menu-titles">SUBOPTION A 1</span></a></li>
            <li id="nav-menu-item-43393" class="..."><a href="#" class="..."><i class="nav-icon"></i><span class="menu-titles">SUBOPTION A 2</span></a></li>
        </ul>
    </li>
    <li id="nav-menu-item-43343" class="...">
        <a href="#" class=""><i class="nav-icon"></i><span class="menu-titles">OPTION B<span class="fa fa-angle-down"></span></span></a>
    
        <ul class="..." style="...">
            <li id="nav-menu-item-43398" class="..."><a href="#" class="..."><i class="nav-icon"></i><span class="menu-titles">SUBOPTION B 1</span></a></li>
            <li id="nav-menu-item-43399" class="..."><a href="#" class="..."><i class="nav-icon"></i><span class="menu-titles">SUBOPTION B 2</span></a></li>
        </ul>
    </li>
</ul>

Go to Source
Author: Ezequiel

Unique clipping mask inward of a div

I’m trying to determine how to add a unique kind of clipping mask that doesn’t appear to be in clippy. I’ve created a basic demo below which kind of resembles what I’m trying to achieve:

#test {
  width: 300px;
  height: 300px;
  background: pink;
  position: relative;
}

#circle {
  border-radius: 50%;
  background: white;
  width: 100px;
  height: 300px;
  position: absolute;
  left: 85%;
  top: 0;
}
<div id='test'>
<div id='circle'>

</div>
</div>

Essentially I’m trying to get a mask on the left of a div, so in this demo I’ve just created a circle and placed it over it to demonstrate what I’m trying to achieve.

Does anyone have any actual workaround for this? Thanks for the help

JS Fiddle: https://jsfiddle.net/mo823e4c/

Go to Source
Author: user8758206

Change post featured image

I would like to you ask you. I changed the dimensions of the thumbnail size in my theme. But in the categories, it looks stretched (I mean the images associate with a post in the category view). Problem is that some pictures are in landscape and others are in portrait format. The picture is not visible in full resolution. Is there any CSS command which can help me? What do you recommend?

Go to Source
Author: Mike Woods

How to have a sliding animation from the bottom to the top with CSS?

I’ve spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It’s supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn’t sit flush (like this).

HTML & CSS:

.testTube #border {
  width: 40px;
  height: 150px;
  margin-top: 15px;
  background-color: white;
  border: 2px solid black;
  border-radius: 5px 5px 25px 25px;
  position: absolute;
}

.testTube #fluidLeft {
  width: 20px;
  height: 100px;
  margin-left: 2px;
  background-color: #ff007f;
  border-radius: 0% 0% 0% 25px;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.testTube #fluidRight {
  width: 20px;
  height: 0px;
  margin-left: 22px;
  background-color: #ff1a8c;
  border-radius: 0% 0% 25px 0%;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fluid {
  from {
    height: 0px;
    margin-top: 167px;
  }
  to {
    height: 100px;
    margin-top: 67px;
  }
}
<div class="testTube">
  <div id="border"></div>
  <div id="fluidLeft"></div>
  <div id="fluidRight"></div>
</div>

Go to Source
Author: Steven Jamieson

Hide “What’s Happening” and “Who To Follow” on Twitter

Because the divs have random hash classes I can’t figure out how to hide them or what to hide them with. These sections take up an insane amount of space and the content is terrible, would love to hide them.

I tried div[aria-label="Timeline: Trending now"] {display:none;} with Stylish but either the selector or chrome extension didn’t work.

Go to Source
Author: stephd

Is Tailwind the better option?

Is Tailwind a good option when it comes to designing instead of CSS? And is it acceptable in the software development industry? I recently discovered Tailwind while coding in ReactJS. The format of coding using Tailwind is very different and more flexible. However I am not sure if it can be applicable in the software industry.

Go to Source
Author: Munira Tashrifwala

WordPress childtheme not loading any CSS/SCSS

I’m using the BigFoot theme and I’ve made a child theme from this. I’ve set everything up, my child theme is activated in the wp-admin and everything looks good but for some reason my page isn’t loading any CSS.

I’m writing SCSS and converting it into CSS with a build task, when I run the build task it succesfully compiles the SCSS to CSS.

This is my functions.php page

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
//deze code laadt de CSS van de PARENT get_template_directory_uri()
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
//laadt ook de  eigen CSS

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(  ) . '/css/screen.css', array('parent-style', 'bigfoot-style', 'bigfoot-css'), wp_get_theme()->get('Version'));

}

This is the style.css page

/*
Theme Name:   Bigfoot Child
Theme URI:    ***************
Description:  Bigfoot Child Theme
Author:       ***************
Author URI:   ***************
Template:     bigfoot
Version:      1.0.0
License:      GNU General Public License version 3.0
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Tags:         light, two columns
Text Domain:  bigfootchild
*/

I’ve already tried a bunch of solutions I found online but none of them seem to be working. Any idea on what I’m doing wrong?

Any help would be highly appreciated!

Go to Source
Author: Maxim

page alignment and div element alignment

So I am trying to build a page like this :

enter image description here

but it looks like this:
enter image description here

I try to use multiple div and also combine Row and Col to do it but it seems a mess. Some changes also do not have any effects.

Code:


import React from 'react';
import TextContents from '../assets/translations/TextContents';
import BlueButton from '../components/materialdesign/BlueButton';
import TeachIcon from '../assets/images/teach-class-icon.svg';
import HostIcon from '../assets/images/host-a-class-icon.svg';

import './CreateClassAndHost.css';
import { Row, Col } from 'react-bootstrap';

class CreateClassAndHost extends React.Component {

    render() {

        const CreateAClass = 
            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { TeachIcon }
                        className= "create-icon"
                        alt="TeachIcon"
                    />    
                    <h2>{TextContents.BeATeacher}</h2>
                </div>
                <p>{TextContents.BeATeacherDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createaclass" text={TextContents.BeATeacherBtn} />
                </div>
            </Col>;

        const CreateAHost = 
            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { HostIcon }
                        className= "create-icon"
                        alt="HostIcon"
                    />  
                    <h2>{TextContents.HostAClass}</h2>
                </div>
                <p>{TextContents.HostAClassDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createahost" text={TextContents.HostAClassBtn} />
                </div>
            </Col>;
        return (
            <div className="create-container">
                <h1>{TextContents.CreateClassOrHostTitle}</h1>
                <Row classname="create-section">
                    {CreateAClass}
                    {CreateAHost}
                </Row>
            </div>

        );
    }

}

export default CreateClassAndHost;

Css code :

.create-container {
    width: 80%;
    position: absolute;
    display: flex;
    text-align: center;
    margin-top:5%;
    margin-bottom: 5%;
}

.create-container h1 {
    text-align: center;
    height: 51px;
    margin: auto;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    width:100%;
}

.create-section {
    width:100%;
}

.create-icon {
    width:47px;
    height:47px ;
}

.create-style-title {

}

.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: center;
    width: 200px;
    height: 250px;
    background-color: #ffffff;
}


.create-tile h2 {
    font-family: Source Sans Pro;
    font-weight: bold;
    font-size: 30px;
    line-height: 0.7;
    color: #333333;
    letter-spacing: -0.6px;

}

.create-tile p {
    font-family: Source Sans Pro;
    font-size: 20px;
    line-height: 1.6;
    color: #616161;
    width: 280px;
    height: 85px; 
}

.create-button {
    position: relative;
    left: 0px;
    top: 50px;
}

Any idea how to make it looks like the page provide above ?

Also anyone can provide a good resources on how to build properly layout. I would like to also looke at myself on some resource easily showing how to align,.. build…

Thanks

Go to Source
Author: Seb

Is it valid to use role = “listbox” to input element?

I am creating a custom control for multiselect such that I am using input element wrapped with a container to type the value and ul and li elements to show suggestions. In order to flexible with assistive standards, I am using the role of input element as listbox. The problem is that chrome accessibility lighthouse tool test cases getting failed. I went through some of the blogs and documentations about the role but I could not find any related things. So my question is am I allowed to use role as textbox for this or to ignore the failed case?

enter image description here

I gone through the below resources

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role

https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Suggest where I am going wrong.

Go to Source
Author: Jeyanth