Hey there Deckey,
Hope you’re well today!
Please try adding this custom CSS via that plugin you’re using:
nav#site-navigation {
position: absolute;
}
This should make the header remain top when you scroll down and keep everything else the same.
Hope this helps 🙂
Cheers,
Bojan
Thread Starter
Deckey
(@deckey)
Hi! Thank you for your help!
I’ve tried, but now with this code the menu “disappear” when I scroll down the bar.
Instead I’d like to leave the menu bar to remain fixed and visible at the top (as the same as the Demo) … and make sliding only the page.
Hey Deckey,
I’m not sure I understand what you’re trying to do. Could you please add some screenshots so I can better understand it please?
Best regards,
Bojan
Thread Starter
Deckey
(@deckey)
Of course:
http://s8.postimg.org/5ch5jqdcl/Schermata_2015_01_19_alle_15_41_26.png
http://s8.postimg.org/4bgwulwd1/Schermata_2015_01_19_alle_15_41_24.png
For now, the menu and the logos scroll on the page (and cover the text)…It’s possible to fix it? so as to have the menu always visible (as now), but it does not cover the text.
Is also possible to move the Title “Anni 60 – Sheffield FC” under the menu (now is up)?
(if you need, I can paste the “Header.php” code
Hey Deckey,
If you want your navigation to be fixed when you scroll down. It has to cover the text in one point.
As for placing the title under the menu you can do it by adding this custom CSS:
@media screen and (min-width: 1200px) {
img.aligncenter.size-full.wp-image-215 {
position: absolute;
left: 0;
right: 0;
top: 50px;
}
}
@media screen and (max-width: 1199px) { {
img.aligncenter.size-full.wp-image-215 {
position: absolute;
left: 0;
right: 0;
top: 160px;
}
}
This should place the title under the navigation.
Hope this helps 🙂
Cheers,
Bojan
Thread Starter
Deckey
(@deckey)
Thank you soooooo much! 🙂
All is well now!
Thread Starter
Deckey
(@deckey)
Hello! Can I ask you another help?
Is possible to fix the Header on the top with a background (not in the homepage, but only in others pages)? Maybe with black background or, better, the same image that is now on each page?(the piece of background-image with the three words “Integrity, Respect, Community” like this: http://s29.postimg.org/3vzanea3b/backgroundpage_01.jpg )?
So the menu-nav scroll down in pages with an image background.
Thank you!
Hey there Deckey,
Hope you’re well! 🙂 Working with Bojan here.
First, I suggest you use a child theme http://codex.wordpress.org/Child_Themes or use css custom plugin like this: https://wordpress.org/plugins/simple-custom-css/ if you will customize your theme.
Add the code in your child theme’s style.css or using the plugin mentioned above.
Here is the options:http://prntscr.com/5w92dt
You can fixed the position of the “Integrity, Respect, Community” image meaning even if you scroll the image will still be there.
Here is the code you need:
background: url(http://provamarco2.altervista.org/wp-content/uploads/2015/01/cropped-2010titolo.jpg);
background-attachment: fixed;
NOTE: Don’t forget to remove the image you have there before applying this.
Or you can just put a solid black background on header which I recommend because it will give your user the benefit of easy reading.
Here is the code you need:
#menu-menu1 {
background-color: #000;
}
Hope it helps! 🙂
Take care,
Calvin
Thread Starter
Deckey
(@deckey)
Hello there!
Thank you so much for your help!
I’ve tried to insert the code in “Simple Custom CSS” plugin, but doesn’t work. What I’m doing wrong?
Here are other codes that I have included in the plugin CSS:
/* Enter Your Custom CSS Here */
.only-on-home.no-fittext #site-title a {
font-size: 120px;
font-family: 'Arial', cursive;
color: #fff;
}
@media (min-width: 768px) {
.navbar-nav {
display: table;
margin-left: auto;
margin-right: auto;
float: none;
}
}
.home main {
display: none;
}
#site-navigation {
background-color: rgba(0, 0, 0, 0);
height: 170px
}
.navbar-nav {
background-color: rgba(0, 0, 0, 0.7);
margin-top: 10px
}
@media screen and (min-width: 1200px) {
img.aligncenter.size-full.wp-image-231 {
position: absolute;
left: 0;
right: 0;
top: 65px;
}
}
@media screen and (max-width: 1199px) { {
img.aligncenter.size-full.wp-image-231 {
position: absolute;
left: 0;
right: 0;
top: 160px;
}
}
I’d like to fix this image on the HEADER background, but only in the pages (not in the homepage): http://s12.postimg.org/vhlc8x7f1/bandapagina_01_01_01.jpg
and fix the position of the “Integrity, Respect, Community” image then when you scroll the image still be there.
I’ve also noticed that: with mobile device the website have some problems! (I think because in the homepage I’ve put two logos -on the left and on the right-)….
oooouch!
Hey there
Hope you’re well! 🙂
Delete all the code inside the plugin then replace with the code you will find here: https://gist.github.com/calvincanas/7de50f9c7c43a574a649
At the last block of code. I fixed the position of the “Integrity, Respect, Community” image meaning even if you scroll the image will still be there.
Let me know if it helps! 🙂
Take care,
Calvin
Thread Starter
Deckey
(@deckey)
Hi there!
Thank you for your help!
But it still not working 🙁
Now there’s the image, but still not scroll down under the menu.. instead I would like to have only a “strip” of the image in the header at the top of each page that runs down along with the menu and side logos. (for now only the logos and the menu scroll down with transparent background)
Can you control? I left the code that you gave me, so you can see how it’s working 🙂
Hey there Deckey,
Hope you’re well! 🙂
I think this is not possible by editing the css only since I noticed that the style of your header image is done via javascript. Also it is not set as background image it is wrapped around img tag. It will take a lot of modification but I want to know what’s your decision.
Looking forward for your reply! 🙂
Take care,
Calvin
Thread Starter
Deckey
(@deckey)
Hi Calvin! Thank you!
I’d prefer to have a background image on the header of pages (not in homepage)…but I don’t ask you to help me if there’s a lot of work to do!
So, I think I can use a black or white simple background….but…is it possible to have only on the pages, not also in the homepage? (for now is always black…)
Thank you!
Hey there Deckey,
Hope you’re well! 🙂
To achieve bg color only in pages and not in homepage, follow these steps but first use child themes for any customisation you will make. Read more about it here: http://codex.wordpress.org/Child_Themes
1.) Get the code here: https://gist.github.com/calvincanas/769d4c18877c98c87309
2.) Create a new file named header.php inside your child theme’s folder.
3.) Paste the code from step 1.
4.) Done.
Check if you like it. If in homepage == no background else black bg in another page. 🙂
Let me know if it helps! 🙂
Take care,
Calvin
