I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
Related
I'm working on wordpress project for a friend. Unluckily (for me), she decided that site need sticky header which goes beyond my actual CSS understanding. I've created css that helps me center logo and menu below. Now I need help with making it sticky and setting logo in between menu/navbar positions.
Screen of header
[1]: https://i.stack.imgur.com/Vg3PF.jpg
a:focus {
outline: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&family=Playfair+Display+SC&display=swap');
/* center logo*/
.site-branding{
width:100% !important;
text-align:center;
}
.site-header .site-branding img {
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
max-width: 300px;
}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:55px;
font-size: 24px;
font-family: Playfair Display SC;
}
#media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
.entry-content{
font-family: Open Sans;
}
.h2 {
font-family: Playfair Display SC;
}````
you can use sticky and position : fixed for sticky items.
.sticky {
position: fixed;
top: 0;
width: 100%
}
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
I was looking for many posts here on stackoverflow, but there was nothing, what could help me. Maybe this question is trivial, but i don't know how to do that, because I am beginner in this
So i have some header, where is logo, menu and some title -that is not problem. Under this header i have div with class slider, where i want to have some background-image and on this background-image i want to have some button and title and another image. And here is finally my question.
What should i do, if i want to have this background-image of this div on full width and with auto height (height from end of header to end of screen) for any screen resolution on desktop?
I mean: if i have resolution 1920x1080 i want to have this bg-image from end of header to end of screen. Same thing for resolution for example 1366x768 etc etc...i hope you understand my question.
Example on this
image
Header is red. And i want to have bg-image (in this case white part of image, but i want to have image there) auto resize for any screen resolution.
I really hope you understand my question and someone can help me.
Really thanks for any reply
http://jsfiddle.net/YKY4t/
I have some errors in code so please...
Code:
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
height: 10%;
background-color: #ff5959;
position: absolute;
}
.mainheader img {
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top: 1.5%;
float: left;
}
.title {
position: absolute;
margin-top: 1%;
margin-left: 22%;
font-size: 35px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}
.meta {
position: absolute;
margin-left: 18%;
margin-top: 3%;
font-size: 19px;
font-family: 'Quicksand',sans-serif;
font-weight: bold;
color: #ffffff;
}
.nav {
position: absolute;
right: 20%;
margin-top: 1%;
font-size: 19px;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
}
.nav li {
list-style-type: none;
float: left;
}
.nav li a {
color: #ffffff;
text-decoration: none;
display: block;
margin-left: 25%;
}
.slider img {
background-image: url(../img/slider-image.png);
background-repeat: no-repeat;
background-position: center center fixed;
background-size: cover;
}
As i commented, you can use media queries for the different screen sizes where you can use different resolution images. In that case:
#media all and (min-width: 1920) {
.img-holder img{
background-img: url(../img/slider-image.png);
}
}
#media all and (min-width: 1366) {
.img-holder img{
background-img: url(../img/slider-image-medium.png);
}
}
You can use them to use all screen resolutions you want to cover.
You alse can use any responsive framework like Bootstrap which responsives the images.
On this website, when the viewport width is reduced to 595px or below, the following CSS should apply:
#media (max-width:595px) {
#header-left,#header-right {
display: block;
width: 100%;
float: none;
}
}
The browser is recognising the CSS, and it appears active, however, #header-left (which contains the logo) is not 100% wide, or is #header-right (which contains the phone number).
That is, #header-left & #header-right still try to take up half of the width, and appear side by side, instead of above and below each other.
Why is this occurring? Thanks.
Remove position:absolulte; from #logo {position: absolute;top: 0px;left: 0px;} and remove from #menu Then your code works fine.
You should override the following commented rules in your css specific to the 595px size:
#logo {
/* position: absolute; */
/* top: 0px; */
/* left: 0px; */
}
#header-right {
width: 50%;
float: right;
padding-top: 8px;
/* text-align: right; */
}
#menu {
/* position: absolute; */
/*top: 80px;*/
/*left: 0px;*/
background: url(images/menu-bg.png) no-repeat;
width: 960px;
height: 55px;
}
Note: Override the commented rules