I customized wplms nav menu, now the cart item number inside gets overshadowed after logging in
here's what the cart looks like:
https://prnt.sc/uRFyFlSm5_vx (when logged in)
here's what it looks like:
https://prnt.sc/fl5n6ZccipJL (when logged out)
I tried overring the css but had no luck.
header.sleek.transparent.fix .vbpcart span em {
background: #FFE074 !important;
font-size: 10px;
line-height: 1;
position: absolute;
top: -9px;
font-style: normal;
border-radius: 50px;
width: 20px;
text-align: center;
font-weight: 600 !important;
color: #000 !important;
padding: 5px;
left: 9px;
}
here's the css
Notice how on the working page you are able to scroll, while the faulty page is fixed.
.sleek .topmenu>li:first-child a>span {
overflow: inherit;
}
Using the overflow property, you can restore this scroll.
Related
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
I'm currently working with the WordPress theme evont and trying to do some custom css on the homepage. There is a button on the home page that is too low on the page so I tried doing some custom css to raise it.
Whenever I change the margin-top value, the button no longer clicks or animates. Can not seem to figure out what is causing this.
First picture is of the animation that happens when hovering, before touching any css.
Second picture is what happens when hovering, after touching the css.
Below is the code for the button that I could find:
.jx-month-small .event-ticket-btn {
font-size: 50px;
font-family: 'Oswald';
font-weight: 500;
text-transform: uppercase;
background: #000;
line-height: 1;
padding: 15px 80px 15px 30px;
margin-top:140px;
display: block;
position: absolute;
left: 82%;
width: 100%;
margin-left: -45px;
transition: .3s all ease-out;
}
.jx-month-small .event-ticket-btn:hover {
margin-left: -95px;
}
.jx-month-small .event-ticket-btn a {
color:#fff
}
.jx-month-small .event-ticket-btn a:hover {
color:#fff300
}
what about trying to add
bottom: 200px;
or
top: 80%;
something like that since its absolutely positioned.
would help to see the html code associated with it.
This website localhotchat.com has text flowing out of the red bar. I have tried adjusting it but, it doesn't seem to go away.
The 14pt text snippets on the homepage (and internal) are supposed to be inside the red_colored_strip but it ain't and half of it is flowing outside (the text is white in color so you will have to select it to view it). I am not familiar with Joomla and don't know how to fix this. Please offer some advice.
Here are the classes being used by the where the disoriented text is located on the html sheet.
.steps_blurb {
margin: 0 auto;
padding: 0;
color: #ffffff;
background-image: url('../images/redbox_bg01.jpg'); /*url('../images/redbox_bg02.jpg');*/
background-repeat: no-repeat;
background-position: top left;
width: 845px;
height: 65px;
border: none;
}
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
/*margin-top: 40px; Added by yuvi to fix the red_banner issue*/
}
the table row that holds the red box, is above the next row..
to fix it, I would create a, p tag with a class which can pull the text up!
<style>
.pullup{
margin: -85px 0px 0px 0px !important;
position: absolute;
padding: 0px;
width: 93%;
text-align: center;
}
</style>
<p class="pullup">All text here</p>
:)
Find this class in your template.css:
.steps_blurb01, .steps_blurb01td
Located in root/templates/lhc13/css/template.css
And add this:
margin-top: -20px;
So the whole block looks like this:
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
margin-top: -20px;
}
You can adjust -20 up or down if you need more or less space.
I have a case where my design requires me to declare this class:
.panel {
position: fixed;
top: 100vh;
height: 90vh;
margin: 0px;
padding: 0px;
width: 100%;
transition-property: top;
transition-duration: 1s;
}
.panel:before {
background-color: inherit;
top: -1.5em;
width: 10em;
text-align: center;
font-weight: bold;
content: attr(id);
position: absolute;
border-bottom: none;
border: .5em solid black;
border-top-color: inherit;
border-left-color: inherit;
border-right-color: inherit;
border-bottom: none;
border-radius: 25%;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
In short, panels are tabs that fly in when targeted via an foo style link.
In their default state panels sit just under the bottom of the screen,
This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.
HTML for these panels is <section id="about" class="panel color">...</section> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.
So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.
I had believed that a:hover ~ * .panel { top: 97vh; } was the correct solution to do this, but it doesn't seem to be firing.
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.