I'm trying to place a down-arrow in my navigation menu, if there is a li within an li.
Hover over the Shop link to see where I'm having difficulty - http://codepen.io/anon/pen/ABucF
The arrow (or V for my demonstration purposes) should be just after the Shop tab, Check Out and My Account, not inside it.
How would I be able to achieve this in the CSS?
Thank you.
You're trying to look at an element to check for a specific condition and style its parent based on that.
CSS can't yet be used to style parent elements unfortunately.
Your best bet is to simply add a class onto each element you want styled and do it that way or to physically place an icon/img in each anchor tag that requires it.
Alternatively use JavaScript to make it happen.
give a class to the parent who has sub child in it i.e Shop
.parent:after{
content:"V";
//or
background:url(image.png) no-repeat position;
}
updated pen
Related
Goal: I need to set anchor tags for the wordpress-site: http://joy-academy.eu/programs/
I am using Visual Composer and there is some animation.
Problem: If I try to set an anchor tag, it scrolls to the right place but does not show the previous parts that are animated like here:http://joy-academy.eu/programs/#example or if I use a Plugin "scroll to Id", it just scrolls to a random place, like for example here: http://joy-academy.eu/programs/#cc
Details: The Wordpress Theme is "Zyen". Ref: https://themeforest.net/item/zeyn-multipurpose-wordpress-theme/8848292
Thanks for your help!
I see that your site is using the Zeyn theme.
That's the first place to look for coding style changes. Here's a demo example doing what I think you are hoping to achieve. http://djavaweb.com/selector.php?theme=zeyn-classic
This means don't use the button for an anchor. So, use the Extra id in the rows to correspond with the anchor link (#example).
Here's the directions to do this; just start after the steps about the menu items.
http://kb.detheme.com/knowledge-base/zeyn-faq-one-page-navigation/
I am wanting to create Custom Links within my menu to open to (open) tabs on a page. I have tried to use anchors but this is not working.
Please see example for URL: https://adventurethon.savvylittlefreelancer.com/
Main menu > Events (dropdown) > Clarence Valley > Results
Under main menu settings, I have created a Custom Link for "Results" and want this to redirect straight to the Results Tab under Event > Clarence Valley when clicked on.
I have given a section within the tab an ID or clarence-results and linked this to Menu Custom Link > Anchor = #clarence-results with no luck.
Anchor ID on Results
Anchor ID in Menu
I have also added in the direct URL: https://adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results & adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results (with no https://)
And no luck.
The custom links direct to page successfully but does not take me to the "results" part of the page.
Any pointers?
Thanks!
I am not sure what the parent element is that is displaying as none, but I tried to
#clarence-results {
display: inline;
}
Not quite sure how to display the parent element.
Thanks!
It is because a parent element of the tag with the "clarence-results" ID is being hidden with CSS display: none. Make sure the element is showing, and the jump link should work.
I have checked and there is not reliable way to select this particular element with CSS. I suspect it is being hidden by some sort of setting in the backend, so your options are:
Find the setting that makes this element visible
Add a visible element above it with an ID, and use that as the anchor. If you don't want it to be visible, you could use visibility: hidden and/or height: 0; overflow: hidden;
Add an ID to the wrapping column or row, then use that as the anchor.
Without being able to see your site's admin, it's difficult to find the best way to fix it. But the root of the problem is that the ID you are linking to is not visible on the page, so you need to either make it visible (I strongly suspect there is a setting somewhere that is hiding it), or you need to link to a different (visible) ID.
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!
The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.
I am trying to style the Select element using http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
the options are starting well above the button.
Am not able to style it. could someone help me how to modify it.
Link: http://bakasura.in/king/forms.html
If you add a height of 30px to the select.styled class, the menu will appear in the correct location.