I need to delete one item in my mobile menu via Custom.css. I don't want to edit other files in WordPress.
This is screen of my mobile menu items. And I want delete just one position. It's easy to do that via Google Chrome editor, but what do I need to add in my custom.css to save this permanently?
Screen of my menu before originally:
Link to website: http://test.projekt-tenis.pl/wordpress/
All i want is to delete only : " Oferta " from the menu.
After editing it in google chrome my menu looks like :
As you can see " Ofera" is deleted.
I want just do this via Custom.css. I saw a few topic about it but still don't know how can i do that.
This should fix it. We don't need to delete the DOM node using JavaScript or something. Each and every menu item in WordPress can be uniquely identified using their Post ID. In your case, it is 988. We can use display: none; for that particular element and hide it using CSS. This is the sole reason for having #media queries.
Use this CSS in your custom.css.
#media screen and (max-width: 960px) {
#menu-item-988 {
display: none;
}
}
I am targeting the clients with a screen size of 960px or less, which can be loosely considered to be a mobile device. You can always refer to CSS Tricks' Media Queries for Standard Devices.
Preview:
"Deleting" an item from the DOM can be done in a variety of ways. I imagine what you're going for can be achieved with a simple display: none; property assigned to that item in your CSS file, this will remove the element visually but will not delete it from DOM.
Related
I have two adjacent divs. One has only a single header ("MENU"). The second one is a simple table of contents. I want to show the table of contents iff user's screen width is >= 800px. In any other situation, the MENU div is hidden and table of contents is visible by default.
In order to show/hide table of contents based on screen size I use:
#media screen and (max-width: 800px) {
#tableOfContents { display: none; }
#menuSign { display: block}
I figured out how to show the table of contents when user hovers over MENU sign but I have no idea how to make it stay visible when the cursor moves from one div to the other.
#menuSign:hover + #tableOfContents {
display: block;
background: #f00;
cursor: default;
background-color: darkgray;
color: white;
}
Sorry if the answer to my question is obvious- I'm completely new to web development. All answers to similar problems either used JS (which I cannot do) or did't explain how to make table of contents persist on the screen.
If the divs have no empty space between them and the cursor can flow seamlessly from one to the other, you might try to change the selector into:
#menuSign:hover + #tableOfContents, #tableOfContents:hover { display: block; }
Also, as a personal suggestion, you should try never to use IDs in your CSS, it's bad practice: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4
Moreover, if you are attempting to create a simple hamburger navigation menu, it's better to show the menu itself when the user clicks on the button instead of just hovering over it, for consistency with devices that don't have the hover functionality like mobile phones. This can be achieved in a number of different ways, the simplest involving some very simple JavaScript (or jQuery, for the simpler syntax) to add or remove a class on the DOM parent of the elements you are attempting to style now, or with hacks like using a checkbox as a proxy for the menu button.
I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first.
I'm building a site with 3 columns article. It's working fine on desktop but when you start resizing. It goes like this.
What I want is that 'First post from Salon87 Brooklyn' should be next to 'Second Post' like this.
And this is what I want it to look like on desktop
Here's the code. http://www.salon87.nyc/news/
The problem with the HTML is that, there is an element fix added to the blocks. You need to hide it for mobile devices. Try changing 991px to your requirement.
CSS
#media (max-width: 991px) {
.fix {
display: none;
}
}
I'm currently tasked with making a mobile style sheet for my works website and I've hit a wall with some of the final stages.
My main constraint is that I can't edit the source HTML and have to work with the source provided.
I want to make a table that contains buttons respond when it hits 450px wide by dropping the buttons (table cells) to it's own row. I can do this simply via divs but not tables. I've created a simple example of what I want to do http://test.aboutcher.co.uk/so/tables.html but I have no idea how this effect can be achieved in the table.
I know tables are a bad idea for layouts but I cannot change this in the source so have to fight my way with it.
Edit
I've found my issue, there's a non cell that isn't getting the display:block style applied in the source causing the other two that are receiving the style to ignore the display:block.
Though this is not an Ideal way. but as I see it, I think you can create another table row, and hide it initially by giving a display none; and then use CSS media query, where you set the specify the width: XXpx; and set the top 2nd coloumn to display: none; and bottom table colomn to display : block;
Hope that makes sense
#media (max-device-width = 400px) {
.second-column{display:block;}
.first-column{display:none;}
}
You just need to define that your td is display:block and manipulate them as your div. Have a look at this demo: http://jsfiddle.net/68EQK/