I am looking to style my menu with google translate. Menu works great in English. Menu is 700px wide. When it translates to Spanish it pushes it all down..
So my question: Is there a way to change the font size of text when it goes to Spanish?
I have tried this and it did not work.
.nav a {
font-size: 18px;
}
em:lang(es)) .nav a{
font-size: 14px;
}
I dont know if the code is actually seeing that because Google translate is using js..
Also this is an html site. Not wordpress or anything.
Thanks for any help
You need add lang attribute to your html:
<nav>
<li lang="es">Spanish</li>
<li lang="en">English</li>
</nav>
and css:
nav li[lang|="es"] a{
font-size: 14px;
}
nav li[lang|="es"] en{
font-size: 16px;
}
here is some example.
You just need to change the lang attribute value of li when it goes to Spanish.
Related
I am making a navbar for a website made via GatsbyJS. I am attempting to style the links in the navbar such that they do not have an underline.
I have already set the link to not have any text decoration--when I inspect the element in my browser, it even shows the "text-decoration: none" property. I have also confirmed that my CSS is influencing the object--I can change the color of the text, for example, it is only the text-decoration which I cannot influence.
CSS:
.nav {
background: #fd8;
}
.nav ul {
text-align: center;
border: 1px solid #000;
}
.nav ul li {
display: inline-block;
padding: 8px 10px;
margin: 0;
}
.nav ul li a {
color: #221;
text-decoration: none;
}
html + js:
...
import { Link } from "gatsby"
import styles from "./navbar.module.css"
...
<nav className={styles.nav}>
<ul>
<li>
<Link style={{ textDecoration: 'none' }} to="/about">
About
</Link>
</li>
EDIT: the inline styling with textDecoration was a product of some fiddling I was doing prior to posting this question and was not present until recently. Removing it has no effect on the issue.
Rendered HTML by request:
<nav class="navbar-module--nav--25Dcz">
<ul>
<li>
About
</li>
...
</ul>
</nav>
I have discovered that the errant underline was actually a 1px box-shadow, probably from some global style I can't find associated with the Gatsby Typography plugin.
When you say .nav you want to select a class by that. And as I see, in your html,
nav (<nav...) is a tag with a class navbar-module--nav--25Dcz
So if you change your CSS to:
(Remove the period character . from .nav)
nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}
It should work fine.
Also, take a look at Styled Components: https://www.styled-components.com/ which let you write CSS in JS and use similar features from preprocessors like Less and SASS.
Hope this helps!
Your issue is that you're using a class selector (.nav) when you should be using a tag name selector instead. Changing to nav ul li a{text-decoration:none} should fix your issue. If that doesn't work, then you probably have some CSS with higher precedence somewhere that is overriding it.
So for those still searching for an answer. It's really a BUG. At least with <ul>, <li> tags and their nesting. There's just one bypass, and even that has a bit of a limitation. So here's a sample with a fixed (removed) underline and it contains notes also on what to add, what to avoid.
https://stackblitz.com/edit/keep-remove-underline-from-nested-li-item?file=index.html [working text decoration removal]
the solution is:
need to use inline-block for <ul>, set vertical top align and 100% width
avoid to use white-space nowrap
I tried everything to remove it, then after reading this I remembered that I added what in the link https://www.gatsbyjs.org/docs/typography-js/
Icones was underlined, anything that will be was underlined
nothing worked until I removed that.
I can't explain why, but when I referenced a class that was LESS specific I was able to get the text decoration to go away with text-decoration none. So if you have a less specific wrapper class try targeting the links with that
.wrapper a {
text-decoration:none;
}
You can select the global a tag or be specific, and after text decoration, add !important. That will override any default styling that gatsby is imposing.
.nav ul li a {
color: #221;
text-decoration: none !important;
}
I am new to wordpress theme development.I tried well but not getting right .how to remove underline from links.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url')?>">
<h1 calss="vijay">
<?php wp_loginout('www.google.co.in')?>
</h1>
css file.
h1{
color:red;
text-decoration: none;
}.
I have just discovered that WordPress adds a box-shadowto some of its tags.
a {
text-decoration: none !important;
box-shadow: none !important;
}
Hyperlinks are governed by anchor tags <a> hence you have to use a in
your css link this
h1 a {
text-decoration: none;
}
you can refer to W3School
Its not the h1 that has the underline, it is the a tag sitting underneath it. So, try
h1 a{
text-decoration:none;
}
a{
text-decoration: none;
}
Copy This code & past in Your CSS file
The best option, tested and trusted is just to add this code in the customization tab.
a {
border-bottom: none !important;
}
And the error is gone.
I am trying to add a Google+ login button to the navbar on my Twitter Bootstrap website. This requires adding some javascript, and adding the following div:
Sign In
I am adding this div in the navbar as part of a ul, as shown below:
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li><div id="account-login">Sign In</div></li>
</ul>
How do I make the div act as an 'a' field, so it inherits the proper css properties? I have to keep it as a div to make the clicking work.
The actual url is http://instockalerts.net for reference.
enter code hereNot sure i understand your question properly but i think what you want is the "div" tag to behave same as the "a" tag , inherit its styles etc ? , well easiest solution i can think of is to create a id specific style in your style sheet, like :
#account-login {
padding: 10px 15px;
padding-top: 19.5px;
padding-bottom: 19.5px;
color: #fff;
line-height: 21px;
position: relative;
display: block;
background: transparent;
}
Add hover event in a similar manner by
#account-login:hover {
color: #446cb0;
text-decoration: none;
background-color: white;
}
Can anyone tell me why in the image below the text information is not on the same level?
As far as I'm aware, the exact same styles are governing both the email address and the other stuff, but they're not level...The only styles I've added are the ones printed below and then there's the default stuff that comes with the wordpress blogging software.
If you're willing to help, it might be easier if you visit the site. Thanks
www.dodomainer.com dodomainer.com
Links
<div class="topnav">
<li><span class="class6">||</span><span class="class7"> My abilities in 6 modern languages (中文, Deutsch, French, Spanish, 日本語 & English) can help you find new value in the daily drop list</span></li>
<li><a href="http://dodomainer.com/"><span class="class7">mike#</span>
<span class="class7">dodo</span><span class="class7">mainer</span><span class="class7">.com</span></a></li>
</div>
CSS
.custom .topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom .topnav li a { font-size: 1.5em; color: #000000; }
You can add line-height: 1.5em; to topnav DIV to fix the vertical alignment issue of the nav items.
But in reality you have bigger problems than that. Why are your list items not contained in a list? <li> should be inside a <ul> or <ol>.
UPDATE:
Now that you have a list wrapping your list items, you can get rid of the bullets by adding this to the list itself: list-style: none;
Also, are you really married to the idea of having such long double lines between the list items? If not, then remove font-size: 1.5em; from class6 and your alignment issues will be solved.
Well for a start your html is all messed up, you have <li>'s inside your top div with no <ul>.
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?