I'm trying to create a fixed navigation bar on the left of a site using Bootstrap. This is the site: link
The scrollspy seems to work but the nav div seems to be underneath the Bootstrap containers (visible when scrolling the page, the white line separating the sections seems to be on top of the navigation bar). Also the navigation items aren't clickable.
How can I fix my navigation bar? Is it's placement outside the Bootstrap grid the problem (sadly I don't know a different solution as I use containers and rows for the separated sections of the site)?
Thanks in advance for the help and I hope the CSS isn't too bad O:-)
Add this style to scrollspy menu:
.scrollspy {
width: 50px;
position: relative;
z-index: 999;
}
Related
I have bootstrap accordion at the website, which is positioned horizontally (inline-block panels)
Bootply - code
The problem occurs when I try to open text panel below the image, because all three other panels scroll to the bottom of accordion panel group. Example - screenshot1 screenshot2...
Can you please help me how to fixed all panels to top when open any of panels body text?
When I change .panel-default style to position: absolute; All four panels appear over each other
Live example here - http://www.twodotsmedia.com/u-izradi/uram-system/usluge.php
Just add following css:
.panel-default {
vertical-align: top;
}
Its better to always use vertical-align property with display: inline-block explicitly.
Does anyone know how to get rid of the spacing between the logo on the top left and the menu bar under it? I would like them to align on top of each other. This my website http://www.bigredfro.com
I made a child theme and tried changing some of the code in the css.style file
This is the problem.
.site-branding {
min-height: 135px;
}
Override it with 0px.
I have a WooCommerce shop setup with the theme Retailer. The theme is currently setup to have 3 footer widget placeholders by using grids to allow 3 widgets to be placed. What I essentially want is to be just one widget with 1 grid that takes the width of the whole page/main container.
I have tried this and had success:
Footer Widget CSS
.container_12 .grid_4 { //Expands widget to width of container
width: 100%;
}
However when I did this, my shop sidebar menu to the left disappears. When I remove that CSS, footer goes back to the way is now and sidebar appears.
Refer to this page to see what I mean: http://museiam.ca/product-category/men/
Currently I took out the CSS code for the widget which is why the shop menu is displaying. But notice how the footer menu is messed up. Essentially, I want it to be centered all in one line in the center like so:
http://tinypic.com/r/jrv9mq/8
Here is the CSS for the grid that hold the sidebar:
Shop Sidebar CSS
.container_12 .pull_9 {
left: -820px !important;
}
Any input is greatly appreciated. Thank you.
Adding these 3 lines of CSS inside your stylesheet will fix everything and make the footer content appear centered in the middle without affecting the sidebar:
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
width: 100%;
}
What the above code does is that it specifically targets the .grid_3 inside the footer and increases its width from 220px to 100% thus centering the contents of the footer.
Here's a visual of how it looks after adding the above code:
I'm starting a new project with Bootstrap 3, and I need that clicking on "Sandwich" icon in responsive view, will open collapsed navbar from left side off-canvas instead from the top like in default behaviour.
I'm surprised when I see that in official documentation there is only this Example, that anyway is putting off-canvas a sidebar and not main navigation bar...
Can you help me?
In your custom css:
.navbar-toggle {
float: left;
margin-left: 15px;
}
This will basically override the bootstrap css that forces the toggle to float right. Make sure the put your custom css link tag AFTER the bootstrap css link tag.
I am trying to make the top menu bar float at the top of the page here:
http://www.landedhouses.co.uk/
So that when a user scrolls down the menu is still displayed.
Unfortunately adding position:fixed to the CSS doesn't seem to do the trick, various elements still float around. Can anyone point me in the right direction?
just add on style.css
.strip{
position: fixed;
z-index:1;
width:100%;
}