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%
}
Related
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 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.
Trying here: http://alternativegrow.com.au/
to make logo stay centered and shrink to fit as browser resized (instead of getting cut off). I have followed a number of recommended techniques but to no avail...
I am a little unsure which elements I've added or modified are helping or hindering.
What I've added, via custom css plug in for now:
.header-image .site-title > a {
float: left;
max-width: 100%;
height: auto;
background-size: 100% auto !important;
background-position:center;
}
.title-area {
float: left;
padding: 10px 0;
}
.site-header .wrap {
padding: 10px 0;
}
What is in stylesheet:
/* ## Title Area
--------------------------------------------- */
.title-area {
float: left;
padding: 10px 0 10px 15px;
width: 360px;
}
.header-full-width .title-area {
width: 100%;
}
.site-title {
font-size: 24px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
color: #fff;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
min-height: 160px;
width: 350px;
}
.site-description {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.site-description,
.site-title {
margin-bottom: 0;
}
.header-image .site-description,
.header-image .site-title {
display: block;
text-indent: -9999px;
}
.site-description {
color: #fff;
edit - Oh I did try media queries but they also did not work. Specifically I tried adjusting the min-height at different beak points, with width set as auto, expecting the width to adjust relative to the height setting, but in fact the logo just disappeared when I did this. I do not really want to use multiple sized logos for various break points as this seems clunky to me, however it is better than what is here, but this also did not work for me.
Not sure to understand whether the example you point to is what you try to achieve or what you try to modify.
Maybe this example can help you
The important parts are:
1) to make the element which holds the logo as background take all the space available
2) set the background-size at 'contain'
<header>
<div class="logo"></div>
</header>
.logo{
background:url('http://www.vectortemplates.com/raster/batman-logo-big.gif') no-repeat center;
width: 100%;
height: 100%;
background-size:contain;
}
header{
height:200px;
}
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 }
}
I whipped up this site at http://www.flywavez.com/ and have it mostly situated (I have to even up a few margins a pixel here, a pixel there), but I went to check it on the iPhone, Android (galaxy s3 running 4.3, Chrome and the android browser), iPad, and Kindle and I don't think my CSS margins are being interpreted how they are in the screen browsers (i.e. - desktops and laptops).
I used percentages on my margins, and even tried padding, but I can't find that balance where the elements display relatively uniform. Should I specify a separate style sheet just for mobile with the different margins? For the phones, it seems like .socials ( a sprite, btw) would have a margin-left of 0, with a few on top to kick it down some.
The same for #quick-mid-text, on a seperate phone browser, the margin would be left 0.
However I want to keep it as much in one style sheet as possible. What should I use as margins or element arrangement to render the social media icons to be centered under the player, and for the paragraph in #quick-mid-text to be flush with the left edge of the player?
Here's my CSS:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
.socials a {
display: block;
width: 58px;
height: 50px;
float: left;
background: url(../images/socials2.png) 0 0 no-repeat;
}
.socials a:hover {
opacity: 0.5;
}
.socials a+a {
margin-left: 12px;
background-position: -62px 0;
width: 56px;
}
.socials a+a+a {
margin-left: 4px;
background-position: -120px;
width: 32px;
}
.socials a+a+a+a {
margin-left: 4px;
background-position: -156px;
width: 93px;
}
I'd suggest you use media queries to change styles based on screen width. You can do base styles and then override them etc in your media query.
Eg:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
#media only screen and (max-width: 979px) {
.socials {
margin-right: 10px;
}
}
Please Try This css...
#quick-mid-text {
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
width: 42%;
}
.socials { /* style.css -line no.756*/
float: none;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
padding-top: 0;
width: 260px;
}