I'm using VAGRoundedStd-Bold as my font in the navigation. The navigation is all capitalized. When it is rendered on the page, the height is consistent.
screenshot of the navigation
Here is my navigation CSS:
.mainNav {
font-family: VAGRoundedStd-Bold, sans-serif;
text-rendering: optimizeLegibility;
text-transform: uppercase;
width: 100%;
max-height: 0;
position: absolute;
top: 40px;
right: 0;
visibility: hidden;
opacity: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
transition: max-height 0.8s; }
Please let me know what I should change.
Thanks!
Related
I am just a learner in html and i am working on a template, now i need to reduce the size of the navbar a bit, i have succeeded in increasing size by just incresing the margin at the bolded words here down but i cant reduce size, Pls help. here is the code and attachaed the picture with the navybar bar or just click https://giramisi.host/ to see the real site live
css navbar code
.main-nav__main-navigation .main-nav__navigation-box,
.main-nav__main-navigation .main-nav__navigation-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav__main-navigation .main-nav__navigation-box>li+li {
margin-left: 59px;
}
.main-nav__main-navigation .main-nav__navigation-box>li {
position: relative;
padding: 33px 0px 33px;
}
.main-nav__main-navigation .main-nav__navigation-box>li>a {
position: relative;
display: inline-block;
color: var(--thm-gray);
font-size: 16px;
line-height: 28px;
text-transform: capitalize;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.main-nav__main-navigation .main-nav__navigation-box>li>a:before {
position: absolute;
left: 0;
bottom: -10px;
right: 0;
height: 0px;
background: var(--thm-primary);
content: "";
transform: scaleX(0.5);
opacity: 0;
transition: all 500ms ease;
z-index: -1;
}
}
Trying adding the below code:
.main-nav__header-two__content-box {
height:90px;
}
I'm trying a pretty basic transition but it's not right on Safari..
All I want to do is change background images from A to B on hover. However, the transition is not working the first time I hover over the element.
On first hover, it is just instantly changing as opposed to gradually fading in/out.
JSFiddle here -- https://jsfiddle.net/RalphCSD/z9nx30co/4/
I'm using a Wordpress site if that makes any difference..
I've also included the HTML & CSS below. If anyone can see any errors that may be causing the issue I would greatly appreciate any help.
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.colCon {
padding-top: 50px;
padding-left: 35px;
max-width: 200px;
color: white !important;
font-family: 'Montserrat', sans-serif;
}
.colHead {
color: white !important;
font-weight: 400 !important;
font-size: 12px !important;
}
.colHeadLg {
font-size: 40px;
font-weight: 700;
padding-top: 50px;
}
.colP {
font-size: 12px;
line-height: 16px;
}
.moreArrow {
font-size: 20px;
}
.colBox:hover {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit-backface-visibility: hidden;
}
.hover-div {
width: 200px;
margin-top: 70px;
}
.hover-div .stuff {
margin-top: 0;
position: relative;
width: 100%;
z-index: 2;
-webkit-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.hover-div .stuff-hidden {
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.hover-div:hover .stuff {
margin-top: -40px;
}
.hover-div:hover .stuff-hidden {
height: 40px;
}
<div class="colBox">
<a href="#">
<div class="colCon">
<h2 class="colHead">CUSHION COLLECTION</h2>
<div class="hover-div">
<div class="stuff">
<p class="colHeadLg">Cushions</p>
<p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
</div>
<div class="stuff-hidden">
<p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
</div>
</div>
</div>
</a>
</div>
Try increasing the transition time from 0.5 seconds to 1.5 seconds:
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-webkit-backface-visibility: hidden;
}
You have that jumping in every browser, just rest of them cache the hover image.
Basically, you gotta pre-load the image, which is on hover. Like, set it as background for parent element.
In refrence to: http://meraxcapital.weebly.com/
I'm Attempting to stop the sticky header in a weebly theme for a client but it is driving me nuts here is the basic header css code:
/* Header */
.birdseye-header {
position: fixed;
z-index: 12;
overflow-y: hidden;
width: 100%;
padding: 10px 30px;
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.birdseye-header .container {
display: table;
overflow-y: hidden;
width: 100%;
max-height: 80px;
}
.birdseye-header label.hamburger {
display: none;
}
.birdseye-header .logo {
display: table-cell;
overflow-y: hidden;
margin-right: 30px;
padding: 0;
vertical-align: middle;
line-height: normal;
}
.birdseye-header .logo a {
display: block;
margin-right: 30px;
margin-left: 10px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.03em;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
}
.birdseye-header .logo img {
display: block;
overflow: hidden;
max-width: 200px;
max-height: 40px;
}
.birdseye-header .logo #wsite-title {
display: block;
max-width: 400px;
max-height: 40px;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
}
I have tried all ~logical~ methods, but any suggestions welcome.
I am also coming across some strife trying to enlarge the logo (same piece of code as above)
I have attempted changing the 'max-width / height elements and while that works with faffing around in inspect element it doesn't when actually implemented!
Thankyou so much in advance!
The goal is to disable the "fixed" position and change it to absolute. If you have access to the styles then I would change them directly from fixed to absolute. If not then you can try overriding what is there with the following:
.birdseye-header, body.page-has-banner.affix .birdseye-header, body.splash-page.affix .birdseye-header {
position: absolute !important;
}
As for the image size... You need to disable or change the max-width and max-height on ".birdseye-header .logo img" selector.
You can try overriding them with the following:
body.page-has-banner .logo img {
max-height: 70px;
max-width: 250px;
}
If I understand correctly you want to stop the header from being fixed to the top of the web page you will have to remove the following:
.birdseye-header {
position: fixed;
}
Also you should remove the height - this some how adds height to the header - I think its in your main_style.css line/30:
body.page-has-banner.affix .birdseye-header, body.splash-page.affix .birdseye-header {
position: fixed;
top: 0;
background: rgba(35, 35, 35, 0.95);
/* height: 60px; */
padding: 10px 30px;
}
I have added an overlay dialog box to my homepage.
When I click on the tag the dialog box becomes visible.
The problem now is that when I close the dialog box
the link is disabled for clicking for about 7 seconds.
After doing nothing or clicking around it becomes enabled again.
I have created that fiddle of my source code.
The Css of the overlay dialog looks like that:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 20;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
color: #000;
text-align:left;
border-radius: 5px;
width: 80%;
height: 80%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .content {
height:95%;
overflow: scroll;
overflow-x: hidden;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
In the fiddle my problem is not reconstructed.
Even with all the other stuff the fiddle works correct
but the problem still appears at my page though the code is the same in the fiddle and on my page.
I am using a fullPageSlider of Alvarotrigo.
Perhaps the issue has something to deal with it?
I am creating a site with some nested divs. The navigation bar has been creating an awful horizontal scrollbar. So far I've tried defining the widths of the divs with no luck. I also tried setting a max-width, but that didn't work either.
While I know I could hide the x-overflow, that just seems like a bandaid fix that could cause more problems later on.
Here's a picture of the pesky scrollbar/layout - http://i.imgur.com/i7V3pxf.png
When I inspect element in chrome, it seems that the life_link might be the issue, but I just can't find what's causing it. ):
HTML
<div id='nav'>
<div id='button_wrapper_r'>
<span class='navlink'>characters</span>
<span class='navlink'>guidebook</span>
<span class='navlink'>faq</span>
</div>
<div id='life_link'>LIFE</div>
<div id='button_wrapper_l'>
<span class='navlink'>modbox</span>
<span class='navlink'>packs</span>
<span class='navlink'>members</span>
</div>
</div>
CSS
#nav {
background-image:url("/images/nav_bar.png");
width: 1027px;
height: 151px;
margin-top: 335px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
max-width: 1027px;
}
#nav a {
color: #bd916f;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Amaranth;
text-decoration: none;
font-size: 20px;
margin: 20px;
}
#nav a:hover {
color: #eff9ce;
}
#button_wrapper_r {
position: relative;
top: 54px;
left: 26px;
z-index: 3;
}
#button_wrapper_l {
position: relative;
top: -37px;
left: 620px;
z-index: 3;
}
#life_link {
position: relative;
top: 8px;
left: 460px;
z-index: 3;
}
#life_link a {
font-family: 'Cinzel Decorative', cursive;
font-size: 50px;
}
.navlink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navlink:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #9bd4bb;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navlink:hover:before, .navlink:focus:before, .navlink:active:before {
left: 0;
right: 0;
}
#button_wrapper_l got the same width as your #nav. But then you moving it to the right by position: relative; left: 620px; and get invisible part of that getting through the right side of the #nav element, extending the width of the page.
UPD
I made a JSFiddle using another way to construct your menu – without any relative positions: https://jsfiddle.net/LpbLmmvv/
But there is small problem with width. It doesn't fit your 1027px.
You'd better use flex instead (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). But keep in mind it's browser support – http://caniuse.com/#search=flex