I am trying to create vertical navigation with a horizontal submenu on a website using Elementor. I have managed to do it partly, but I am not able to get the position of the submenu right. I want the submenu to be showing beside the tab (as marked in the pic)
Also, I want the arrow to be aligned centered with the text. Here is the code that I have used to get the output.
#media all and (min-width:767px){
selector{
writing-mode: vertical-rl;
transform: scale(-1);
}
selector .sub-menu {
transform: rotate(90deg);
position: absolute;
}
}
Any help with this is appreciated. I am a newbie at this stuff and got the code built using research. I am using Elementor, and it is updated to the latest version.
Related
I am new to WordPress theme customization. I am using a theme with woocommerce. when i navigate to the products page click on some item for details it show the woocommerce widgets on right side. I am trying to place that side bar on the left side by changing css. It is working but i am facing this issue.
Before changing css add to quote button working fine.
After changing css add to quote button stop working.
Changes in css
.with_aside .sections_group {
width: 77%;
float: right;
}
.with_aside .four.columns {
float: left;
width: 23%;
}
Changing css through inspect element
Kindly help me what i am doing wrong.
Edited
URL
Add following CSS
.column.one-second.summary.entry-summary {
position: relative;
z-index: 99;
}
Only HTML/CSS solutions please
I'm working on an online art portfolio. On each page are a number of paintings, organized vertically. Pretty simple.
However, when the cursor hovers over each painting, I want some text to show, either causing the painting to fade a little bit, or the text can appear in a small text box that follows the cursor.
I would post the code I have now, but after much trial and error, I've stripped it back down to simply a div with the img inside of it.
You'll want to do some selector magic. See attached snippet and CodePen.
Next time, please post some of your attempted solutions. No one wants to just write your code for you.
img.fade:hover /* fade out on hover */ {
opacity:0.5;
}
img.fade + span /* hide spans immediately after images that are set to fade */ {
visibility:hidden;
}
img.fade:hover + span /* display spans immediately after :hover faded images */ {
visibility: visible;
}
<img class="fade" src="http://41.media.tumblr.com/d4473a971038c392b3e4ecb42e013784/tumblr_nlyfpjetVZ1tdg8rso7_500.jpg">
<span>Here is some Text</span>
See CodePen http://codepen.io/anon/pen/PPPqvM
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)
I can't figure out why our website has such a large width. Here's a link to it: https://85.25.242.165/lunatic/default/index
As you can see there is a scroll bar at the bottom and the whole width is roughly double the size of the website. I've tried finding an item that is so wide via Firebug but no luck. Everything is within the original width of the website.
We're using the Web2py framework.
There's your problem
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
}
add
body {
overflow-x: hidden;
}
and everything should be fine.
I had a similar problem which occured in Firefox Mac only, when I added this code:
body {
transform: translateZ(0); // This enables hardware acceleration for smoother animations.
}
As the comment says, it is supposed to smooth animations but it ended up ruining my site on FFv24 Mac.