I have created a plunkr here
I have a main page with left navigation (index.html). When I click on Header details the AddHeader.html page should be opened. Where I have added all the files. I think I am missing out something due to which the AddHeader.html page is not getting perfectly fitted in the main page. When I run this in internet explorer the AddHeader.html page is always shown at the bottom. Please help.
I am just adding a snippet from index.html where I have added ng-view:
<div class="pull-right" style="margin-right:20px">
<div ng-view></div>
</div>
Navigation bars are fixed, you have to set margin for the content. I have updated your code here
Look at index.html line 58, as your code above, I have removed pull-right and added a class page-content to the div and set margin for it in CSS:
.page-content {
margin-top: 50px;
margin-right: 20px;
margin-left: 140px;
}
You have a navbar on the left with position: fixed. You either need to float the navbar and container to the left (which probably wouldn't be desired behaviour), or account for this with a margin offset on your container:
.container {
margin-left: 60px; /* Equal to the width of your navbar */
}
Hope this helps!
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
How do I remove the min-height style at content-wrapper class for AdminLTE. I am having issue that right side bar is too long and my page does not requires it.
When I debug and close the min-height, everything looks fine.
My code doesn't have min-heightat the style, I am not sure where it comes from and how i can tweak it.
Code
<div class="content-wrapper" style="margin: 0px;">
</div>
Suggested solutions
.fixed .right-side {
padding-top: 50px;
min-height: 100% !important;
}
Your solution is to override the .content-wrapper class.
.content-wrapper{
min-height: 100% !important;
}
if you have sidebar menu in your panel and content menu is Higher than main content height , it is ok and you shouldn't change this part because if you change it breakdown your template. if menu's height is less than main content but you still have scrollbar
It is because of this aside with main-sidebar class. it has padding style. removed this padding top and add this padding to user-panel class
I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
This question already exists:
Fixed position navbar obscures anchors [duplicate]
Closed 8 years ago.
I have a Bootstrap 3.0 navbar with that is always visible at the top of the page, but this could represent anything for which the position property is fixed.
<nav class="navbar navbar-default navbar-fixed-top" >
Because fixing it takes it out of the document flow, I need to add some padding to the body element so the content isn't hidden when the page is first display
body {
padding-top: 70px;
}
The problem is that when I click a menu item to navigate to a section, like #About then the top of the section is cut off.
jsFiddle
Q: Is there a way to adding padding so that the full item will come into view when navigated to?
Updated Answer:
As described in this answer, The problem is, your browser always wants to scroll your anchor to the exact top of the window. If you set your anchor where your text actually begins, it will be occluded by your menu bar.
Instead, set the padding-top for the container to the amount offset you want, and the margin-top for the container to the opposite of the padding-top. Now the container's block and the anchor begin at the exact top of the page, but the content inside doesn't begin until below the menu bar.
section {
padding-top: 60px;
margin-top: -60px;
}
jsFiddle
I would set the overflow: hidden on the body and add your site's content to a scrollable element.
Your layout should look like this:
<html>
<head></head>
<body>
<div class="navbar"></div>
<div class="wrap">
<!-- rest of content for site -->
</div>
</body>
</html>
Add these CSS rules:
html, body {
overflow: hidden;
height: 100%;
}
body {
padding-top: 50px;
}
.wrap {
height: 100%;
overflow: auto;
}
Check out my fiddle