I have an existing site that I created with a typical 200px x 300 px logo and then a nav menu to the right of it. The last link in the menu links to a partner site.
They've decided they want to put a 200x300 logo in place of their text link, so my nav menu would essentially be bookended by matching logo images. I'm semi familiar with putting an image in for a nav link and it's a current wordpress install.
I have custom CSS in this wP install, but would that be the best practice for this? Just using an image in CSS for that specific link?
<a class="vasile" href="http://partnerwebsite.com"> Vasile.com </a>
In CSS file add this:
a.vasile {
background-image:url(http://imagethatyouwantotuse.com/image.jpg);
display:block;
height:?px;
width:?px;}
Related
So, i made a website using Wordpress and elementor, I would like to change the image on the right when you hover on the label 'Carrello'. Basically when I hover on different drop-down menu labels, the ima should change accordingly on which link I'm hovering. That's the link of the website (don't look at anything else, I'm just doing some practice on Mega Menu).
That's my code (in this example I've just used display:none just to see if I can affect the other div but the goal should be change it) :
.megamenu22 .elementor-nav-menu li:nth-child(2):hover ~ .elementor-element-d0f1e73 img {display:none !important}
Thank you!
https://www.archless.it/
I'm trying to setup a Blogger site and would like to include a horizontal set of social media links in the footer. I can add image widgets in Blogger that are linked, but when I add more than one they appear vertically and left-justified. I tried wrapping the widgets I wanted in <div> tags and using css to alter their positioning, but Blogger wouldn't let me save the raw code saying:
All widgets must be wrapped with a <section> tag.
Has anyone else had this issue and if so how did you over come it?
Thank you in advance for any help.
Instead of adding each link separately with Blogger’s image widget, insert a single HTML/Java widget with code similar to the chunk below with the link and image path references updated to the ones you plan to use.
<div id="menu">
<ul>
<li><img src="img_src1”></li>
<li><img src="img_src2”></li>
</ul>
</div>
Then go into the “Theme” panel and click “Customize”. In the new screen choose the “Advanced” tab and scroll down to “Add CSS”. Paste the below code to be added. The result should be a horizontal list of linked images in your footer.
#menu ul{
list-style: none;
text-align: center;
}
#menu li{
display: inline;
margin: 10px;
}
Note: you can change the spacing by changing margin if desired.
Also, since you mentioned you were using the Image widget which allows you to upload images, if you need your own images hosted you can still use the Image widget for this. Upload your image into an Image widget and place it on your home page. Go to your website and right-click on the image and choose "Open in New Tab". Copy the URL and place it into the html list you're creating to house your social media links. You can then tun off the visibility of the Image widget and Blogger will still host the image.
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
I am trying to create another page from the index page of Agency Bootstrap theme ,
in which the page will contain only Menu bar and its footer , but when i try to remove the
<header class="masthead">
Tag which i don't want but once i do that menu will not have background black color
Required Result :
Erroneous page while creating new page
Source : https://github.com/BlackrockDigital/startbootstrap-agency
Thanks !
The simplest way to solve the color issue is to add bootstrap class bg-dark to the nav tag. another solution is to add class .color
.color{ background-color: #212529}
if You want to remove the navbar Shrink effect just delete this line of code
<script src="js/agency.min.js"></script>
Hello I've converted the sudo image slider into a more of a content slider for my website and i want to the Nav Links (text) to be highlighted when active (on certain slides of the slider)
I've tried using: "active selector" but it only seems to work with real page links like
Home
Opposed to the slider with this:
Home
Note: the menu is not within the slider.
An example of what i mean is like the menu here but just text: http://rbista.com/demos/zwin/ (this is using easy tabs i'm using sudo slider)
Can this be done in css/html as i don't no JQuery ?
Any help would be great!
This should be enough
$(".customLink").click(function(e)
{
$(".customLink").removeClass("active");
$(this).addClass("active");
});
.customLink.active
{
some css here
}