I'm using oceanwp theme,
I want to have topbar that disappears when scrolling and the menu will jump to the topbar place (with opacity) i was trying this code
#site-header {
position: fixed;
left: auto;
width: 100%;
z-index: 2000;
opacity: 0.9;
}
and that not working,
the menu is stick in his place and there is a hole in the topbar place,
someone know how to fix it?
Can you send to us link to your site, this gonna make everything more easy. If, this 'sticky' menu is creating with jquery or vanilla js then your css fixes doesn't change anything. Just check your js files for ".scroll(" and you should find this snippet.
//Sorry for my english skills :/
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop < 50) {
document.getElementById("site-header").style.top='auto';
} else{
document.getElementById("site-header").style.top=0;
}
}
I know it's not the best semantic solution, but its should work for your site. Add this to custom js, or another js file.
I checked on your site and its working :)
Just add this code to your custom CSS/js in the theme customizer section and vuala!
#site-header {position: stuck; left: auto;
width: 100% z-index: 2000;opacity: 0.9;
}
This one worked for me
#site-header {
position:fixed !important;
z-index:1000;
top:0;
width: 100%;
}
#main {
margin-top: 70px !important; /* 70px - width of the header. This can be changed from the theme customizer */
}
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…
Hi I am trying to build a angular single page app for mobile that uses a map on one page. It also should include a sticky footer, and is based on bootstrap. The sticky footer css interferes with the css needed to get the map to take up all of the remaining screen space, so I add a class='map' to the html element to override certain css elements (see below).
Everything works nicely until I go to the map page, leave it and then return to the map page. In this instance the map is not working correctly at all. It is hard to describe, so please try the plnkr.
I have found CSS that works for the map reloading, but then that breaks something else in the site. It is driving me crazy trying to combine the two models, hence my appeal for help.
Update: I have now found that resizing the screen rectifies the rendering issues, until you leave and return to the map. Of course a mobile use cannot change their screen size, but this may help find a solution.
html {
position: relative;
min-height: 100%;
}
html.map {
height: 100%
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.map body {
/* For Google map */
height: 100%;
margin-bottom: 0;
padding-bottom: 60px;
padding-top: 60px
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
header {
width: 100%;
background-color: #ccc;
height: 60px;
top: 0;
}
.map header {
position: absolute;
}
UPDATE
I implemented a solution similar to yours, which I found in this blog article. Essentially, you have to trigger a resize event in order to have the map repainted correctly when it goes from hidden to visible.
But I put my code into a directive instead of a controller (doesn't bloat controller and decorates the element it affects), instead of adding a watcher it runs only after the directive/element is linked (more performant), and it doesn't require you to re-enter your coordinates in order to refresh:
.directive('autoRefresh', function($timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$timeout(function(){
var center = scope.map.getCenter();
google.maps.event.trigger(scope.map, "resize");
scope.map.setCenter(center);
});
}
}
})
Updated Plunker
OK, so what I was missing was to trigger the resize event. This now works perfectly in my plunker but not yet in my more complex actual code. Nearly there!
restosApp.controller('mapCtrl', function($scope) {
$scope.$watch('map', function() {
google.maps.event.trigger($scope.map, 'resize');
var ll = new google.maps.LatLng(52.374, 4.899);
$scope.map.setCenter(ll);
});
});
I'm looking to make my navigation in WordPress static. By this I mean I wish for it to remain at the top of a user's browser regardless of how far down he/she scrolls. The effect I'm looking for is similar to one found at http://www.chevrolet.com/
Any advice or guidance in the right direction would be appreciated.
Thanks,
D
Find the template code for your wordpress navigation
Check what class it uses
Modify the css for that class using
.yourNavClass {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
There you have it!
Changing the following should do it.
ref:
1. line 63 of main.css
2. line 203 of main.css
#container #mds-area-header {
position:relative;
top:0px;
margin-top:0px;
padding-top:0px;
}
#mds-area-header .nav_second_level_1 {
margin-top:0px;
}