sticking header menu

paleica · Member · Jul 25, 2014 at 9:34 am
Copy link

Add topic to favorites
I use the theme “pictorico” and i would like to know if it’s possible – using the css upgrade – to fix the header menu (where you can read “episoden.film”, where you find the search box and the blog pages “Startseite”, “Erzählstränge”, etc.) at the top, so you always see the menu/pages, even when you scroll down within pages or posts (like it works with the tdeditor-theme, or collective)

The blog I need help with is: (visible only to logged in users)
pcosta88 · Member · Jul 25, 2014 at 9:52 am
Copy link
In CSS it would be,
```
the variable for your header here  {
position: fixed;
}
```
Pro-tips:
Don’t forget to add a semi-colon to the line above where you place “position:fixed;”
You may or may not need curly braces. If they already exist where your header variable is in CSS do not add them.
paleica · Member · Jul 25, 2014 at 10:18 am
Copy link
Hello,

thanks for that superquick response but somehow that didn’t work!
I inserted
{
position: fixed;
}

in the css-window of wordpress.com but I fear there is the definition of the header missing?

That’s the whole text in my css-window:
/*
Willkommen beim benutzerdefinierten CSS!

CSS (Cascading Style Sheets) ist eine Art Code, der dem Browser sagt, wie
eine Webseite dargestellt werden soll. Du kannst diese Kommentare löschen
und mit deinen Anpassungen beginnen.

Als Standard wird dein Stylesheet nach den Theme-Stylesheets geladen, das
heißt, dass deine Regeln Vorrang haben und die Theme-CSS-Regeln
überschreiben können. Schreibe einfach hier rein, was du ändern
möchtest, du musst nicht den gesamten Stylesheet-Inhalt deines Themes
kopieren.

Wenn du zukünftig Hilfe brauchst, stelle deine Frage gerne im CSS-Forum.
*/

(i fear i cannot send a screenshot here)

Can you help me out?

Kind regards,
Christina
pcosta88 · Member · Jul 25, 2014 at 10:33 am
Copy link
Try in CSS, try to locate the header element
which should be displayed as header, curly braces, and a bunch of CSS info and then curly braces:
Example:
```
header  {
  Bunch of CSS info;
}
```
You want to add the following phrase to the bottom of the CSS info
position: fixed;
paleica · Member · Jul 25, 2014 at 10:49 am
Copy link
seems like it’s not as easy as I imagined… I integrated a z-indicator so that the header is in the front but the content should be below and not behind and the white space aound the header should be across the whole screen… like in a full screen responsive lay. Is there a not too complicated way of defining that?
thesacredpath · Member · Jul 26, 2014 at 1:58 am
Copy link
Hi there, due to the responsive design of Pictorico, this is a little complicated and takes several Media Queries to keep things aligned properly at different browser window widths and for smaller screens (tablets and phones). Replace what you have with the following and then make sure and narrow and widen your browser window to ensure that everything stays aligned when you are at the top of the page.
```
header {
    position: fixed;
    width: 100%;
    z-index: 1000000;
}

@media screen and (min-width: 1181px) {
    .flex-viewport-wrapper {
        margin-top: 150px;
    }
}

@media screen and (max-width: 1180px) {
    .flex-viewport-wrapper {
        margin-top: 200px;
    }
}

@media screen and (max-width: 885px) {
    .flex-viewport-wrapper {
        margin-top: 90px;
    }
}
```
paleica · Member · Jul 26, 2014 at 9:33 am
Copy link
thank you so much, that’s awesome!! i only have one question left (which is a little off topic but maybe you can help?): i don’t know what i did yesterday, but something happened so that all posts that are displayed in the slider aren’t visible in the post grids any more…
thesacredpath · Member · Jul 27, 2014 at 4:15 am
Copy link
Hi there, in most themes with pages similar to Pictorico, the posts which you set in the slider are excluded from the main posts listings below the slider to keep from duplicating things.
paleica · Member · Jul 27, 2014 at 9:08 am
Copy link
I know but until thursday the posts where shown and there are people using the theme (examples in the theme showcase article) where they are still displayed in the slider as well as in the grids.
thesacredpath · Member · Jul 28, 2014 at 4:11 am
Copy link
Hi, I’m checking into this with the theme designer, but probably won’t hear anything back till Monday morning. I’ll let you know as soon as I get clarification from the designer.

I checked several of the Awesome Blogs using Pictorico on the Showcase page and did find one that was showing at least one of the posts in the grid and also in the slider, but two others I checked did not seem to have them in both places.

Hang in there and I’ll get back with you as soon as I hear from the designer.
paleica · Member · Jul 28, 2014 at 11:55 am
Copy link
there just appeared one little problem concerning the code (back to the sticking header topic): when i do the category search, the grid content is “behind” the header so you can’t read the titles of the first row. is there anything i can do about that?

thesacredpath · Member · Jul 30, 2014 at 7:58 pm

Hi, on the spacing on archive and categories pages, replace the media rules I had give with the following.

@media screen and (min-width: 1181px){
	.flex-viewport-wrapper{
		margin-top:150px;
	}
       .archive .content-area {
        margin-top: 150px;
       }

}

@media screen and (max-width: 1180px){
	.flex-viewport-wrapper{
		margin-top:200px;
	}
       .archive .content-area {
        margin-top: 200px;
       }

}

@media screen and (max-width: 885px){
	.flex-viewport-wrapper{
		margin-top:90px;
	}
       .archive .content-area {
        margin-top: 90px;
       }
}

thesacredpath · Member · Jul 30, 2014 at 8:41 pm
Copy link
On the posts showing in the grid and also in the slider at the top. They will not show on the main page, but they will show once you click on the older posts button below the grid of posts because that is effectively, no longer the main page, but page 2 of the posts. If you click the older posts button, the URL will change to show /page/2/ at the end of the URL.

Short answer: The theme is designed to not duplicate posts on the opening main page in Pictorico.
paleica · Member · Jul 31, 2014 at 7:23 am
Copy link
it’s nearly perfect now! thank you!
i only saw two little things left: category or tag name is now fixed too and like a layer in front of the grid, which makes the grid partly impossible to click. like here: http://paleica.wordpress.com/tag/dinge/

second thing is: when you click at a page then the headline is covered by the header menu like here: http://paleica.wordpress.com/projekte/

is there an easy way to avoid that?
eurello · Staff · Jul 31, 2014 at 7:06 pm
Copy link
Hi there,

category or tag name is now fixed too and like a layer in front of the grid, which makes the grid partly impossible to click. like here: http://paleica.wordpress.com/tag/dinge/

Try replacing header with .site-header, like this:
```
.site-header {
	position: fixed;
	width: 100%;
	z-index: 1000000;
}
```
second thing is: when you click at a page then the headline is covered by the header menu like here: http://paleica.wordpress.com/projekte/

Try:
```
.wf-active .entry-title {
margin-top: 75px;
}
```
How does that work?
paleica · Member · Aug 1, 2014 at 5:38 am
Copy link
seems to work perfectly! thank you so much for your support!!

The topic ‘sticking header menu’ is closed to new replies.

sticking header menu

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media