Hey I'm trying to add icons to my top navigation bar.
I have a plugin for social media icons, so I am trying to add the plugin shortcode to the nav menu. I downloaded a plugin to allow me to add shortcode to a menu.
Here is the shortcode I want to add: [feather_follow show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
I tried adding size="16" to make the images smaller but it made them disappear completely. Please visit my site to see the results I am getting. Containers and sizing are all screwed up, I have no idea how to begin fixing this.
Can anyone take a quick look and suggest anything? I would REALLY appreciate it. I have already wasted hours and hours on this simple problem. My site is greenenvysupply.com
Try adding this
[feather_follow size="64" show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
You should use percentages for making your icons smaller without losing the ratio of the icons. So you can write something like this in your main CSS:
.top-bar ul>li a {
width: auto!important;
height: auto!important;
}
.top-bar ul>li a img {
position: relative;
width: 30%!important;
height: 50%!important;
}
Related
I am using the Kale Wordpress theme, and in the footer, I used an image widget for my logo. I am trying to center this image using the Additional CSS panel under customize. I believe my centering code is correct, and that I am just having trouble identifying the proper Selector or class to let CSS know what I am trying to center.
I tried using Inspect Element in Chrome to find what it says is the class name for the image but to no avail.
.image wp-image-14 attachment-medium size-medium .footer-row-3-widget widget widget_media_image {
display: block;
margin: 0 auto; }
If it helps my website is revoltmedia.org, and I am trying to center the logo at the bottom. Again I think the code I have for centering the image is fine, I am just having trouble figuring out what the name of the class/selector is for the image so I can actually call it, and center the image.
Thanks in advance!
Looking at the HTML with Chrome's dev tools (inspect) I can see that the footer seems to have an id for this widget (#media_image-3) so that could be your selector to use text-align: center;
Now, if you want to specifically target only this image (and none other), you can use a more specific selector like #media_image-3 > img.image and then you can use the properties you already have, like
#media_image-3 > img.image {
display: block;
margin: 0 auto;
}
Try this:
.footer-row-3-widget widget widget_media_image {
text-align: center;
}
Can someone please help me edit the CSS for this website of mine for mobile sites, on the homepage?
Keep in mind that this is done through Wordpress and the theme I am using does NOT allow me to edit the theme CSS itself, however, I am using a plugin that allows me to add my own custom CSS to it. Take a look at this if you don't understand.
Please help me out. I've been trying to center all of the text in each sections for mobile but nothing is working someone help!
I can add code if needed be, thanks!
try putting this code on your site. It should fix the "Proven Success" section on mobile.
#media only screen and (max-width: 667px){
.categories .module-title {
left:0px !important
}
.categories .module-subtitle.font-serif.home-prod-subtitle {
left:0px !important;
}
.section-overlay-layer .module-subtitle.font-serif.home-prod-subtitle {
margin-left:0px !important;
}
.module-subtitle {
margin-left:0px !important;
}
}
I have a set of social media icons in the footer of my website.
The icons are inserted there via a Text widget; the code for the icons is as follows -
<div class="icon-benz-footer" style="font-size: 16px; text-align: center;">[social-media items_align="center"]</div>
For some reason, the icons won't appear on a mobile device. How do I rectify this?
I've checked you website and the .site-footer-first-widget-area is hidden on mobile phones. The code for this is present in the main.css file.
If you want it to be always visible you can make the following changes to your main.css
/*=========================================================================
3. Footer styles
======================================================*/
.site-footer-first-widget-area
{
display: block;
margin-bottom: 10px;
}
PS: your inline css in the opening post has a small flaw. There is no such thing as float: center;
Hope this answer helps!
I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.
Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.
Hope I can get any hints.
-- update
Wow, thanks for all the answers! However I must apologize to everybody because I checked the site today and it looks the way it should without me changing any code. Now I'm curious as to why something like this is possible.
iam not sure about this, hope this is because of various line-heights used.. but try update the class ".fa" below. Hope this will fix your issue..
.fa {
line-height: inherit!important;
}
Try to add this:
.fa {
transform: translate(0, -50%);
top: 50%;
position: relative;
}
Don't alter .fa CSS, this is needed for every icon and will break every other icon you have!
Instead, add this to your css:
.search-trigger {padding:15px;}
I tested that in Chrome and it worked fine.
Try:
.toggle-make a {
display: inline-block;
float: none;
}
I have played with Chrome Inspector and it seems that floating has something to do with it. As far as I can see, you are using display: block; with width but no height.
You need to add this code
.fa-twitter:before{
position: relative;
top: 8px;
}
I have created the following website http://www.nabresco.com from an html based theme.
Im definitely no expert in coding bit i figured my way out in order to edit it to my needs.
The website is up and running now and is looking good.
There is only one problem left that i cannot seem to figure out.
The pictures in the galleries are acting as if they are black and white and become coloured only when the cursor is on the actual selected picture. This is happening on some coputers and on others im viewing it normally (weird?).
I want to change them to all be colored all the time without having this black and white effect.
The code on the html for these pictures is as follows (showing first pic in the gallery code):
<div class="preloader">
<a class="bwWrapper single-image plus-icon" href="images/projects/al-rawi/5.png" rel="folio">
<img src="images/projects/al-rawi/5.png" alt="" >
</a>
This shows the pictures whith a plus sign that you can click on.
The css code is as follows:
/* -------------------------------------------------- */
/* Images
/* -------------------------------------------------- */
.single-image {
position: relative;
display: block;
margin-bottom: 15px;
}
.bwWrapper {
position: relative;
overflow: hidden;
display: block;
im quite lost now as i dont know if there is something that i need to change from the CSS file or not.
Thank you,
Rashed
Try it with
.BWfade{
display:none!important;
}
Should work. (tested in Firefox)