I have website:
http://marekzurek.com
I'd like to change menu font size to 14px and make social media icons 200% bigger.
My CSS: https://past ebin.com/EuAw67mf
first for the font size go to your css on line 352 and change font-size: 10px; to 14px. Then for the icons go on line 844 and up the font size.
Simply set font-size to the right value for both the menu and icons.
In your style.css find .mainmenu .navbar-nav li a and add font-size: 14px;
.mainmenu .navbar-nav li a {
color: #fff;
font-size: 13px;
padding: 30px 15px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
As for the icons, do the same and set font-size to 200%;
.social-links ul li a {
font-size: 200%;
color: #222222;
margin: 25px 10px;
display: block;
}
#menuid-or-class { font-size:14px;}
.icon-class {font-size:200%;}
Related
I'm having trouble with having adding an underline style on hover in my css. Whenever I hover over the text, the padding/margin freaks out. I'm not sure why. Here is the website. https://portfolio-blog-5cc56.web.app/
h2:hover {
position: relative;
border-bottom: 10px solid #85C0DB;
display: inline-block;
line-height: 0.15;
transition: 0.3s ease;
margin: 0
}
It seems like it is changing your line-height from 3rem to 0.15.
See the original css:
h2 {
font-family: 'EB Garamond', serif;
font-size: 1.9rem;
line-height: 3rem; /* <-- */
font-weight: 400;
color: black;
margin: 0;
}
.list li::after{
content:" ";
width:100%;
display: block;
position: absolute;
height: 2px;
background-color: green;
}
ul li a{
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
}
HTML
<ul>
<li>contact</li>
</ul>
When i get over mouse li tag, I want to have liner after it, but this liner should be the same width as his li. Also I don't know how to active ::after, after `:hover.
Use a simple gradient:
ul li a {
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
background-image:linear-gradient(green,green);
background-size:0% 2px;
background-position:bottom left;
background-repeat:no-repeat;
transition:1s all;
}
a:hover {
background-size:100% 2px;
}
<ul>
<li>contact</li>
</ul>
What I would recommend is to make use of border-bottom on the <a> element. You can control how far away this underline is from the text with padding-bottom.
This avoids the need for ::after completely, and can be seen in the following:
body {
background: black;
}
ul li a {
display: inline-block;
/*padding: 10px 20px;*/
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
padding-bottom: 10px;
border-bottom: 1px solid green;
}
<ul>
<li>contact</li>
</ul>
Note that the width of the line (the border) is controlled by the amount of horizontal padding on the element. I've commented this padding out in the above example to show the line at the exact same width as the link.
I have a button for my page that I'm also styling it
<button id="logButton" >Iniciar sesión</button>
And then the css code
#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Here's a fiddle also.
If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?
It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.
#logButton
{
min-width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
min-height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>
and If you want to know about bootstrap's .btn here is css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
#logButton
{
/* Removed height & width*/
padding: 10px 20px; /* Added */
margin-bottom: 5px;
margin-left:35%;
font-weight: bold;
font-size: 31px;
font-family: helvetica, arial, sans-serif;
}
Don't hardcode a width. Using padding on the left and right sides. Here you go.
#logButton
{
padding: 3px 15px 0 15px;
margin-bottom: 5px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
if you want to hide overflow of text then use {overflow:hidden} is css code.
if you want to keep text but not want to increase with then use {height:auto}
I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
}
a:visited
{
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover
{
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active
{
font-weight: bold;
color: white;
text-decoration: none;
}
And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?
why dont you put a border on the items and make it the same color as your background and simply change color on hover
try adding box-sizing : border-box to your css. This would make the border to go inside the element.
Change your CSS like this:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border-radius: 5px;
padding: 4px;
border-color: transparent;
}
This way there will be no nudging.
You can just add a padding to the regular links. The hover state will override the regular padding and add the border.
a {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
http://jsfiddle.net/5dQL5/
a{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border: 2px solid transparent;
}
Just add a border with the same width (in your case 2px) but make it transparent and that's all.
Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030
Try this code
a{
border: 2px solid transparent;
}
a:hover{
border-color: #303030;
}
Can someone help me find the error when I tried to display the list in one line but it didn't do it.
#main-nav ul ul li { display: inline; }
But the text is not displaying line. Please take a look jsfiddle.net/EZJwM
I changed the
display: inline
to
float:left
and got this http://jsfiddle.net/EZJwM/5/
The menu isn't centered but they display in one line.
solution to your problem js fiddle demo
i change display:block to display:inline to get it on one line but you have
to work it out considering you style design i think for main-nav you should use css classes
to avoid intersection on what you exactly want otherwise you will get all so fuzzy
change 1
#main-nav ul li{ display: inline; }
change2
#main-nav a:after {
color: #aeaeae;
content: attr(data-description);
font-size: 11px;
font-style: italic;
font-weight: 400;
display: inline;
line-height: 0;
margin: 3px 0 -3px;
text-transform: lowercase;
}
change 3
#main-nav ul ul a {
border: 0;
border-bottom: 1px solid #252525;
border-top: 1px solid #4c4c4c;
color: #fff;
display: inline;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 11px;
letter-spacing: 0;
font-weight: 400;
padding: 8px 20px !important;
text-align: left;
text-transform: none;
}