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.
Related
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.
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 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;
}
I have a JS image slider that I want to go under the fixed menu on scroll, But the slider has to use CSS position:Relative to work. (I can make it go under the nav bar with different position types but then the image slider doesn't work as it should)
How can I keep the slider working but make it go underneath my fixed menu bar?
Here is the page before scroll:
http://i.imgur.com/JdYL7gx.jpg
Here is the page when the image slider is in front of the nav bar: (I don't want it to be)
http://i.imgur.com/Mt8bLGk.png
here is how the content should be behind the menu:
http://i.imgur.com/6MzVy63.png
Set the z-index of your slider to a negative number to move it behind the header.
example
#slider {
z-index: -9999;
}
Or, set the header to a higher z-index to move it above everything else.
example
#header {
z-index: 9999;
}
If that doesn't work, share the code so we can help figure it out.
This is the website that I'm trying to recreate - http://www.ulta.com/
I'm trying to replace the search bar with just a plain white bar with few words on text on it. It needs to be on every page just like on http://www.ulta.com/.
I'm using Wordpress for the website, and fairly new to HTML/CSS. Please advise. Thanks.
You can declare a Div with position:fixed in CSS.
In CSS, put the "position: fixed;" for the position/div that you are trying to fix at the top.
Add the following div to the header.php file just after the tag.
<div class="topFixedBar">Some text</div>
and add the following to your style.css file.
.topFixedBar
{
position: fixed;
width: 100%;
background: #fff;
height: 30px;
}
The above should show a white bar at the top of every page (you can change the background color/height to whatever your requirements are.