Edin theme: Freezing the header and top menu when scrolling

kineticmovementcoaching · Member · Jul 1, 2016 at 3:42 am
Copy link

Add topic to favorites
Hi,

I am looking to freeze the logo and menu at the top of my pages when scrolling across all devices. I am using the Edin theme and have the upgrade with CSS. Have no background in programming or website design.

My website is http://www.kineticmovementcoaching.com.

I found some code that partially worked:

@media all and (min-width: 800px){

.site-header {
position: fixed;
width: 100%;
z-index: 9;
}
.overflow-container {
padding-top: 72px;
}

Problem is that it freezes to far down the screen into the page and does not freeze when on a tablet or phone.

Thank you in advance.
Tom

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 2, 2016 at 12:04 am
Copy link
Hi there, give the following a try and make sure and view on tablet and phone, if you can to make sure everything works well. From my testing it appears like it does.
```
#masthead {
    position: fixed;
    z-index: 1;
    width: 100%;
}
body[class*="front-page"] .hero.with-featured-image {
    padding: 350px 0;
}
```
kineticmovementcoaching · Member · Jul 2, 2016 at 1:58 am
Copy link
Thank you so much, worked perfectly :)
kineticmovementcoaching · Member · Jul 2, 2016 at 1:59 am
Copy link
Thank you so much, worked perfectly :)
thesacredpath · Member · Jul 2, 2016 at 2:28 am
Copy link
Hooray and you are welcome!
ybaileche · Member · Aug 6, 2016 at 2:14 pm
Copy link
Hello,

I tried this code but it nearly worked for me. The featured image is cut. Can you please help?

Thanks
thesacredpath · Member · Aug 8, 2016 at 7:40 pm
Copy link
@ybaileche, you have your site configured a bit differently than the other person in this thread, and we are going to have to use a different approach. Add the following instead and see if this does what you are wanting.
```
@media screen and (min-width: 1020px) {
#masthead {
    position: fixed;
    z-index: 1;
    width: 100%;
}
body[class*="home"] .hero.with-featured-image {
    padding: 350px 0;
	background-size: 100% auto;
	background-position: 0 70%
}
}
```
ybaileche · Member · Aug 9, 2016 at 9:58 am
Copy link
Thanks for this! This is working for the homepage only. How can I make this work for the whole website?
ybaileche · Member · Aug 9, 2016 at 10:26 am
Copy link
Thanks for this! This is working for the homepage only. How can I make this work for the whole website?
ybaileche · Member · Aug 9, 2016 at 12:13 pm
Copy link
Also, I need help for the following:
– reduce space between primary menu and secondary menu
– submit button in forms – when hover have the text become black and the background in white
– in the secondary menu, I changed the labels by icons and I want the line that appears when hover to be thinner
– in the secondary menu, when clicking on the twitter or facebook icons have a new page opening
– contact form in widget – have the text normal (not in bold)

Thanks in advance
thesacredpath · Member · Aug 9, 2016 at 11:39 pm
Copy link
@ybaileche, this thread was originally about changing only the home (front) page, which is why I gave you the code that I did. To have it affect all pages with featured images, use the following instead.
```
@media screen and (min-width: 1020px) {
#masthead {
    position: fixed;
    width: 100%;
    z-index: 1;
}
body .hero.with-featured-image {
    background-position: 0 70%;
    background-size: 100% auto;
    padding: 350px 0;
}
}
```
thesacredpath · Member · Aug 9, 2016 at 11:40 pm
Copy link
For reference, this is the site for @ybaileche: https://yasminabaileche.com/
ybaileche · Member · Aug 10, 2016 at 7:47 am
Copy link
Yes this is for http://www.yasminabaileche.com

Thanks this is working, apart from the blog page. The content of the page is cut by the header.
g471n · Member · Aug 10, 2016 at 10:04 am
Copy link
Try adding:

height: 200px; to the CSS thesacredpath gave you above.

So it would be:
```
@media screen and (min-width: 1020px)
#masthead {
    position: fixed;
    width: 100%;
    z-index: 1;
    height: 200px;
}
```
ybaileche · Member · Aug 10, 2016 at 10:16 am
Copy link
Thanks for this. It’s working on the blog page but on the other pages I have too much space between the image and the text. How can I make this css work only for the blog page?
g471n · Member · Aug 10, 2016 at 10:46 am
Copy link
I can’t seem to identify the correct class to target only the News page. I’m sure thesacredpath will be able to help,.
thesacredpath · Member · Aug 10, 2016 at 6:30 pm
Copy link
@ybaileche, this will tighten up things on the other pages, but we are sort of heading into the “quagmire” zone. That is the zone where we keep adding things to make adjustments here or there and it has unintended effects in other places. Put this at the very bottom of your custom CSS.
```
.page-template .content-area {
	padding-top: 0;
}
```
ybaileche · Member · Aug 11, 2016 at 10:49 am
Copy link
Thanks a lot for your help. This is still not working for the blog page so I’ll probably won’t use it and organize the site in a different way. Would it possible to help with the following:

– reduce space between primary menu and secondary menu
– submit button in forms – when hover have the text become black and the background in white
– in the secondary menu, I changed the labels by icons and I want the line that appears when hover to be thinner
– in the secondary menu, when clicking on the twitter or facebook icons have a new page opening
– contact form in widget – have the text normal (not in bold)

Thanks in advance
thesacredpath · Member · Aug 11, 2016 at 6:29 pm
Copy link
The spacing between the primary and secondary menu is due to the margins on the search. Give the following a try.
```
.navigation-classic .header-search {
    margin-top: 0;
    margin-bottom: 0;
}
#masthead {
    height: 150px;
}
```
For the submit buttons, like on your contact form, use the following.
```
input[type="submit"] {
    background-color: #000;
    color: #fff;
}
input[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}
```
For the hover bottom border thickness, it is currently at 2px. Use the following to set it to 1px (the thinnest it can be).
```
.secondary-navigation a {
    border-bottom-width: 1px;
}
```
To have the social icons open in a new tab/window, edit your social menu items and you will see a box you can check to have them open in a new tab/window. See this section in our custom menu support page.

On your contact form in the widget, I see only the headings in bold, not the normal text. Do you want the headings to not be bold? If so, add the following.
```
#text-16 b, #text-16 .grunion-field-label {
    font-weight: normal !important;
}
```
ybaileche · Member · Aug 12, 2016 at 11:23 am
Copy link
This is great! Thanks!

No items found.