I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
Related
Within a ul element i have a list of anchor tags that represent social media icons like so :
<ul class="social-menu">
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
</ul>
On Android mobile (the only OS that displays such behaviour by default)i'm noticing that when you click an item the highlight colour will appear correctly the first time. However, after that first time if you select a different icon the highlight appears over the previously selected icon.
I've tried explicitly declaring the -webkit-tap-highlight-color, ensuring the correct anchor tag has been clicked with some console logs for each item and even stripping back the content in the <a> tag to make sure that wasn't interfering but with no luck.
Check the yellow block on the top of this page :)
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
You can try :active or :active and :visited instead.
a:active {
background-color: yellow;
}
If you like my answer, please vote. I need some points to write comments :D If its not well answered, write the exact purpouse you need highlighting for. There wil be someone who will help for sure!
I am trying to change the position of a side panel that comes up when an option is being hovered over. Here is the code from chrome developer tools:
<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
<ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
<li class= "nav_trigger nav_open">
<div class= "sub_panel" style= "left: 50px;"> == $0
</div>
</li>
</ul>
</nav>
I just need to change that style left : 50px to 76px. The developer tools just have this attribute saved under element.style which I can't really target in my CSS file. Any help is appreciated!
I have tried to target by being really specific and ended up targeting the main panel and not the sup panel. Here is the code that I tried:
nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{
left : 76px;
},
Your CSS selector should be as shown below (according to the HTML you posted). Look at every detail: I deleted all commas and a few spaces. If an element has more than one class, you address it like div.class1.class2 (no spaces, but with a dot between the class names). Commas are used to list separate selectors for the same rule, not to indicate child elements as you did. To select an element which has as ID, you directly attach the ID to the element (Not nav #side_nav, but nav#side_nav).
nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel {
left : 76px;
}
If necessary, add !important after 76px (but before the semicolon).
You can use the syntax !important so then it will override all other formating of the type that you use the !important on. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important
You can also use the span element in the HTML to make it even more specific with the CSS.
I built a simple site as part of teaching myself HTML, CSS and JQuery. You can see it here: http://davideyre.co.uk
It was working fine for a while, but now in the 'contact' div several of the images have disappeared. The blue email image remains and the mouseover works to switch to the black email image, but the Twitter, LinkedIn and Google images are not displaying at all.
When I looked at them using the Inspect Element plugin on Firefox, it appears that an img class is being applied to these three icons. This code shows the first list item (the email icon) and the second list item (the Twitter icon) with the img class applied to it.
<div id="contact">
<ul>
<li class="menuimage">
<a target="_blank" href="mailto:david#davideyre.co.uk">
<img width="60" height="60" src="http://davideyre.co.uk/images/email_blue.png" data-other-src="http://davideyre.co.uk/images/emailblack.png">
</a>
</li>
<li class="menuimage">
<a target="_blank" href="http://twitter.com/davideyre">
<img class="qzsombkdzpaqphznltst" width="60" height="60" src="http://davideyre.co.uk/images/twitter_blue.png" data-other-src="http://davideyre.co.uk/images/twitterblack.png">
</a>
</li>
I have no idea how this img class is being applied to the images.
Many thanks to MarkB, IAteYourKitten and Bondye. It was the Adblocker in Firefox. :)
I wonder why you are using the class menuimage. You don't use it in your CSS.
I would try adding some styling to the menuimage class in CSS to see if you can affect the styling of the list tag. Or remove the menuimage class from the list tag and add it to the image tag item, and try to add styling.
I have a markup like which i have given below :
I have given some link to the anchor tag but I want user to click anywhere on the li tag to make link redirect to link given to anchor tag but i cannot place my span inside the anchor tag ,it has to be outside of the anchor tag.what will be the css for that and it should work in IE also.
<ul>
<li>
<span> 1 </span>
Click any where in the li i will take u to somewhere
</li>
</ul>
You can't modify the document object model with css. You would need a javascript function for that.
You could try something like:
<li onlick="window.location.href='your.url'"> ... </li>
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.