I had a look at this website: http://www.rutherfordcapital.co.za/
How do they position their logo in the center so that the top part is slightly higher than the black navbar and the low part of the logo extending into the image?
This could be done using negative margins on the logo, something like this:
margin-top: -2px;
margin-bottom: -15px;
For that use margin for getting the desire position of the image and use z-index: 1; for making logo appear at the front.
For detail
right click on the logo
Then select inspect element
you can then view html code and css of that part
Keeping the z-index of the logo higher than the image and navbar and using absolute positioning this can be done.
Related
Dear all geniuses out there,
I'm building a website in wordpress, however I'm not an expert in it.
I'm looking to make logo bigger and put it between the header and the first part of the slider (with same position on the right as now, however way down on the menu so that half part of logo is within the menu and half part within the first part of the slider, making it not affect the height of the header menu)
The website in question is the following: http://www.ildottoredellepiante.it
I'm sure this is possible as I've seen it on few website, does anybody can help me with the answer?
Do you have something like this in mind?
Screenshot with modified CSS
To achieve this, just add this code to the id #site-logo in the style.css of your wordpress template:
#site-logo {
float: left;
position: absolute;
top: 12px;
}
position: absolute helps, that the size of the logo container does not affect the height of the header.
top: 12px helps to adjust the vertical position of the logo. You can alter that value to change the exact position of the logo.
I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index
I have a page, where I use a full-screen bootstrap carousel for sliding images and a navbar at the top of the page (not fixed).
Now there should be a logo inside the navbar, that overlaps it's height at the bottom and therefore overlaps the carousel.
My problem is that the logo pokes out of the navbar, leading to images in the carousel being slid down.
See for yourself at http://strauss.co.at/reini/
Any ideas what I'm doing wrong?
You need to give the img tag inside the div with an id of logo the following CSS attributes: z-index: 1; and position: absolute. That's all!
You can use this css below:
#logo{
position: absolute;
z-index:1;
}
im new here and im new in the world of css and html. Im try to edit wordpress template with my custom stlye.
This is my web: http://codigomasivo.com.ar/dev/douglas/
I want to change logo part.
The result where i found is this: http://puu.sh/iMZq4.jpg
I try put logo in "position: absolute;" but when im scroll the page the logo move to down.
Sorry for my english. Im from Argentina. Thanks in advance
If you want your logo to go over the borders of your menu, then you could set a fixed height for your menu like height: 70px.
Then for your logo you could use this:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I found the code above here.
Remember to use z-index: 7000 on your logo, or else the top row will overlap it.
Create a div which contains the actual bar
Reduce the actual bar to the height you want
Change the new div's backgroung-color to transparent (background-color: transparent )
Ensure your logo image has height = new-div-height and the old-bar-div is shorter.
I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!
You can change the dimensions of the <a> inside the <li> and set a background image for it. If you don't want the main menu word to appear, you just set `text-indent: -9999px´ on ´:hover´ (image replacement technique).
The best way to set the modifications on hover and come back to normal on hout is to create different classes with the styles. So you change the class via JavaScript on hover, changing the dimensions automaticaly.
Since you already use absolute positioning for your "submenu" list, you should be able to do it with a little CSS.
Provide a background-image: for the list element that contains your desired graphics, set background-repeat: no-repeat, set an absolute height: and re-position your list to the correct top:, left: corner. Use margin: and padding: to get the list elements into their correct position.
-- Update: --
Try the following quick and dirty first sketch to see if I got the idea:
<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
<li>presa</li>
<li>video</li>
<li>foto</li>
</ul>
The submenu covers your main menu entry and the black submenu bar. Provide an image that covers exactly the areas you want and fine tune the positioning.