I'm using slideout.js for a mobile nav and upon each page load, the menu flashes on the screen for a moment and disappears until the hamburger button is toggled. This doesn't happen if I set the div containing the nav to display: none, but of course when I open the menu, none of the links are displayed.
My question is, using Sass, can I create a conditional that performs the following logic on two separate classes:
if .slideout-menu is not set to display: block
then
.mobile-nav should be set to display: none;
CSS can't react to changes that happen on a page without JS help besides from pseudo-classes, so unfortunately you can't target it that way. slideout.js adds classes to style different states of the slide-out menu so try targeting those.
Try something like this:
.slideout-menu .mobile-nav {
display: none;
}
.slideout-open .slideout-menu .mobile-nav {
display: block; // or whichever display property you need
}
Going off of the CSS states in index.css from https://slideout.js.org/
Related
I just want to remove that blue underline from my donate button, its a Custom link i created after going to Appearance -> Menus -> Custom Link. The problem is this Custom link (donate button) is inheriting the same css from the navigation menu items, which i want to change. I have tried applying additional css,
.horizontal-navigation-bar nav ul li a:after {
margin-bottom: -1px;
}
but no success, any help shall be appreciated.
P.S. : - (I am working for the client, he has not given public access to the website, so sharing of url will be of no use), yes i am using UltraPress theme (https://justfreethemes.com/demo/?theme=UltraPress)
thanks
It seems it's just a matter of not targeting the right element, but since we can't see the code it's kind of hard to correct that.
Based on the template, this element, ul.navbar-nav>li.menu-item>a:after, controls the menu's underlines and the below css, when removed, removes the underline. So it should be something similar to this.
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 2px;
Ideally, just inspect in your dev tools to find the exact element and style.
I am having trouble targeting a specific element. I'm trying to change the background color of a widget. My problem is this widget is used in a few spots on the site, so if I change something via CSS, it changes in all the widgets. I've been trying different selector combos via inspecting the element. I can't quite find the right one. The site is here http://titanpanama.com/newsite/ I'm trying to change the backgound-color of the list items under the heading Specials. I've tried
.specials-home .home-estate-widget .post-list li{ background-color:#000; }
I've tried adding a class to the container. Where am I going wrong?
To specifically target the list items in Specials widget, use this:
.specials-home ul.post-list li {
background: #000;
}
Try this:
div#my_poststypewidget-18 > .specials li {
background-color: gold;
}
It targets all children elements that are li in element with class .specials.
Here's input type="search" in it's natural habitat:
<input type="search" value="asd" />
http://jsfiddle.net/u9c7p345/
It has an X icon/button on the right side which is visible when there is text entered in the field.
When using the PureCSS framework, the default browser styling is over-written, and the [X] button which removes the text entered is not there anymore.
http://jsfiddle.net/fonfv7sL/
Can you point me to the file or CSS line that removes this specific browser default so I can amend the code?
As i already said in question comments, this X is being added by your system. In order to have this functionality consistent across all browsers, the first step you need to perform is some actions to negate this wizardry, you need to "reset" your css. About these "X"'s:
To remove “X” from all search input fields in IE, simply add this to bottom of your css:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
To remove “X” from search input field on Chrome Browser (and all it’s mutations), simply add this to bottom of your css:
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
The following CSS code should remove that clear button on all search fields on page:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
source: http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html
you may also wanna disable that glow shadow thingy around the input field when is selected with
input {outline:none;}
now, you have the same look across all systems. now you can build from here the stuff you want, like a "X" across all systems.
So to answer your questions:
Q:What does the PureCSS override that makes the button disappear?
A:Because it probably resets the css, like the way i described.
Q:How do I get it back while keeping the framework?
A:If you want this functionality, you need to create it from scratch so it works for all browsers. Try using a absolute positioned on right div with "X" background on every input when input gets focus.
(NOT) LATEST EDIT:
After your last comment, im answering your question:
Q:how to keep this for the browsers that support it and continue using PureCSS:
A: You need to edit the .css file of PureCSS, search for all "input" rules that look like the ones i showed you above, and remove them.
(hopefully :P ) LATEST EDIT:
Q:how to keep this without changing PureCSS because i am serving it from CDN i can't edit
A: you need to re-apply the default values for the CSS that was reseted. See the default values here how can I revert webkit-appearance for input[type="search"] of normalize.css
Be careful, they must be declared AFTER the PureCSS, so you may wanna have them inline after the PureCSS or an external css file after the PureCSS.
I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}