I wanted to hide the nav-bar on a view within tabs(ion-tab)
Have tried top:0 on .tabs also and hide-nav-bar also
Apparently in ion-view if i use hide-nav-bar it leaves space befor the tabs and making it to top:0px (.tabs { top: 0 !important; }) leaves space between content and tabs
see image below
When using hide-nav-bar on ion-view:
With .tabs { top: 0 !important; }:
However , nav bar hides on tabs bottom and there is no space when it on bottom, is there any solution to hide nav-bar without leaving any space
Solved now, wanted to share this
This was because of the .has-tabs-top class that was being added to the ion-content element.
added this along with hide-nav-bar in view and .tabs { top: 0 !important; }
.has-tabs-top {
top: 49px !important; /* height of the tabs */
}
Related
I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.
I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.
.sidenav-breadcrumbs {
height: 45px;
font-size: 16px;
font-weight: bold;
background: red;
}
.nav-fixed-top {
position: fixed;
top: 100px;
right: 0;
left: 0;
z-index: 1020;
}
.shadow:active {
box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}
Shadow should appear under bar on scroll but seems to only appear when clicking the bar.
Thank you if you can help.
Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.
document.addEventListener("scroll", function(){
addShadowClassToBar();
});
And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.
I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
Here's my website:
www.lukassuarez.com
I use the code below on my gallery to create a horizontal scroll. The only problem is there is a lot of white space at the very end.
Simple question - how do I delete the white space?
<style>
.sqs-gallery {
overflow: scroll;
}
body {
background-image: none;
}
.sqs-gallery-design-strip-slide {
padding-left: 3px;
padding-right: 3px;
}
</style>
<script type="text/javascript">
$( window ).load(function() {
w = $(".sqs-wrapper").width();
$(".sqs-wrapper").width(w/2);
})
</script>
If you can only edit the CSS, you can hide the elements you are not using and set lower padding and margin to other elements.
You can easily see which elements take up the white space by using your browser's developer tools and inspecting the undesired white area.
In your case, you can see a footer with no content, only empty HTML tags with min-height: 34px;. You can also see div element with ID 'page' with padding: 50px 0; and div with ID 'canvas' with padding: 20px;
Example CSS:
#footerBlock {
// Remove min-height
min-height: 0;
}
#page {
// Lower bottom padding
padding: 50px 0 20px;
}
Other possibilities are to fill the footer with content or remove the footer entirely, if you have access to HTML files.
http://www.mhinteriors.com.au/new/index.html
flexslider 2 showing white space around the slider on initial load of webpage and when page is refreshed? If I click on about page and go back to the home page the white space disappears.
If I refresh the page the white space returns.
I have removed flexslider 2 and loaded bxSlider instead and the exact same thing is happening?
It happens when I use Firefox, but it seems like your images contain most of the actual whitespace around them.
To remove the excess border, change this in the jquery.boxslider.css file:
.bx-wrapper .bx-viewport {
border: solid #fff 5px;
}
to
.bx-wrapper .bx-viewport {
border: solid #fff 0px;
}
That will remove the border, from what I can tell.
EDIT
Also, change the left:-5px to left:0pxunder the same.
Another thing, to prevent the arrows from getting "cut off", set the right and left positions to 5px:
.bx-wrapper .bx-prev {
left: 5px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 5px;
background: url(images/controls.png) no-repeat -43px -32px;
}
My URL: http://www.dreambelle.com/
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content...
The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
The background image is rendered from a small bar (attached)
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar
Ive tested the following this works for me in FF5:
// Remove 10px from the #featured_body height
#featured_body {
background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
float: left;
height: 356px;
margin: 0 12px;
padding: 0;
width: 618px;
}
// Add 10px to the sidebar top margin
#sidebar {
float: left;
height: auto;
margin: -375px 0 20px;
padding: 0;
width: 332px;
}
This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.
You have two choices, as I see it:
make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or
place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).