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.
Related
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;
}
I'm trying to create a Boostrap UI where the Desktop view (>= 992px) will have a logo just above the NavBar. I created the following fiddle:
http://jsfiddle.net/4qd79699/
To place the logo where I want, I have the following CSS:
.navbar {
top: -40px;
}
However, as you can see (you might need to expand result view to 992px) the logo is placed behind the NavBar (which makes sense). Now, how can I put the logo on top of the NavBar while being able to click the links?
I have tried adding the following:
.navbar {
top: -40px;
z-index: -1;
}
Then it is displayed as I want but I can't click the links on the NavBar. For some reason I wasn't able to bring the logo "up" by switching its z-index.
Just add a position:absolute; to the anchor holding your image and you can adjust the margin of your image accordingly after.
Here's a jsfiddle of it: http://jsfiddle.net/o49v85Lh/1/
for the image add a the style display:block; and remove the navbar top:-40px
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
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%;
}
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}