Soooooo…
I was trying to get a nav to have a sticky position and even though it wasnt marked as a mistake and it doesnt break the page, the site just doesnt respond, and in the same code it isnt marked as if it underestands it.
Im working with the default theme, and Omeka 3.2.3:
I dont know if its a bug or and intended feature,
Anyways i just thought i should report it
(btw its in a style brackets, if i put any other position it works as intended)
Can you clarify exactly what’s happening when you say the site “doesn’t respond” when you make this change? Are you getting an error, or something else?
As a first guess, it’s possible there’s some problem in how you’re trying to edit the layout file. If you could paste in the text of the whole layout file, with your edits, that might help us tell what’s going on here.
What i mean when i say it doesnt respond its the fact that usually when you write an option that omeka underestands the color of the text changes, in this case it should be blue, but it isn’t, with every other option it works properly, but with stick does not.
Here is the layout copypasted:
<?php
$escape = $this->plugin('escapeHtml');
$siteTitle = $site->title();
$this->htmlElement('html')->setAttribute('lang', $this->lang());
$this->headMeta()->setCharset('utf-8');
$this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1');
$this->headTitle($siteTitle)->setSeparator(' · ');
$this->headTitle()->append($this->setting('installation_title', 'Omeka S'));
$this->headLink()->prependStylesheet($this->assetUrl('css/style.css'));
$this->headLink()->prependStylesheet($this->assetUrl('css/iconfonts.css', 'Omeka'));
$this->headLink()->prependStylesheet('//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic,700');
$this->headScript()->prependFile($this->assetUrl('js/default.js'));
$this->headScript()->prependFile($this->assetUrl('js/global.js', 'Omeka'));
$this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka'));
$this->jsTranslate();
$banner = $this->themeSettingAssetUrl('banner');
$bannerHeight = $this->themeSetting('banner_height');
$bannerHeightMobile = $this->themeSetting('banner_height_mobile');
$bannerPosition = ($this->themeSetting('banner_position')) ? str_replace('_','-', $this->themeSetting('banner_position')) : 'center';
$this->trigger('view.layout');
$userBar = $this->userBar();
?>
<?php echo $this->doctype(); ?>
<?php echo $this->htmlElement('html'); ?>
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headLink(); ?>
<?php echo $this->headStyle(); ?>
<?php echo $this->headScript(); ?>
<style>
<?php if ($accentColor = $this->themeSetting('accent_color')): ?>
<?php
($titleTextPosition = $this->themeSetting('title_text_position')) || ($titleTextPosition = "left");
($titleTextColor = $this->themeSetting('title_text_color')) || ($titleTextColor = "#8ddef2");
?>
a:link,
a:visited {
color: <?php echo $accentColor; ?>
}
/*
a:active,
a:hover {
color: <?php //echo $accentColor; ?>;
opacity: .75;
}*/
<?php endif; ?>
header {
padding: <?php echo $bannerHeight; ?> 0 0;
width: 100%;
background-color: transparent;
}
header nav {
position: sticky;
width: 100%;
z-index: 1;
background-color: black;
}
header nav ul.navigation>li:not(:last-child) {
margin-right: 0px;
padding-left: 15px;
padding-right: 15px;
float: none;
}
header nav>ul>li:last-child {
margin-right: 0px;
padding-left: 15px;
padding-right: 15px;
float: none;
}
header nav ul.navigation>li a {
color: white;
}
header nav ul.navigation>li:hover {
background-color: blue;
font-weight: bold;
}
header nav ul.navigation>li.active {
background-color: #8ddef2;
}
header nav ul.navigation>li ul li a {
color: black;
}
h1.site-title {
font-size: 46px;
padding-bottom: 35px;
padding-top: 35px;
margin: 0;
}
.site-title a{
color: <?php echo $titleTextColor; ?>;
}
header nav ul.navigation>li>ul {
/*position: relative;
top: 0px;*/
background-color:#69a6b5;
/*padding-bottom: 50px;
display: block;*/
}
#content{
/*padding-top: 245px;*/
padding-left: 75px;
padding-right: 75px;
}
header>* {
padding: 0;
}
.banner {
/*height: <?php //echo ($bannerHeight !== '') ? $bannerHeight: 'auto' ?>;*/
height: <?php echo $bannerHeight; ?>;
align-items: <?php echo $bannerPosition; ?>;
justify-content: <?php echo $titleTextPosition; ?>;
margin-top: 0px;
}
.banner img {
/*height: <?php //echo $bannerHeight; ?>;*/
}
<?php if ($bannerHeightMobile !== ''): ?>
@media screen and (max-width:640px) {
.banner {
height: <?php echo $bannerHeightMobile; ?>;
}
}
<?php endif; ?>
/*<img src="<?php //echo $this->themeSettingAssetUrl('banner'); ?>" title="Banner">*/
</style>
</head>
<?php echo $this->htmlElement('body'); ?>
<a id="skipnav" href="#content"><?php echo $this->translate('Skip to main content'); ?></a>
<?php echo $userBar; ?>
<header>
<?php if ($banner): ?>
<div class="banner" style= "background-image:url(<?php echo $this->themeSettingAssetUrl('banner'); ?>)">
<h1 class="site-title">
<a href="<?php echo $site->url(); ?>">
<?php if ($this->themeSetting('logo')): ?>
<img src="<?php echo $this->themeSettingAssetUrl('logo'); ?>" alt="<?php echo $escape($siteTitle); ?>" />
<?php else: ?>
<?php echo $escape($siteTitle); ?>
<style>
header{padding: 0;}
</style>
<?php endif; ?>
</a>
</h1>
</div>
<?php else: ?>
<h1 class="site-title">
<a href="<?php echo $site->url(); ?>">
<?php if ($this->themeSetting('logo')): ?>
<img src="<?php echo $this->themeSettingAssetUrl('logo'); ?>" alt="<?php echo $escape($siteTitle); ?>" />
<?php else: ?>
<?php echo $escape($siteTitle); ?>
<?php endif; ?>
</a>
</h1>
<?php endif; ?>
<nav>
<?php
echo $site->publicNav()->menu()->renderMenu(null, [
'maxDepth' => $this->themeSetting('nav_depth') - 1
]);
?>
</nav>
</header>
<div id="content" role="main">
<?php echo $this->content; ?>
</div>
<footer>
<?php if ($footerContent = $this->themeSetting('footer')): ?>
<?php echo $footerContent; ?>
<?php else: ?>
<?php echo $this->translate('Powered by Omeka S'); ?>
<?php endif; ?>
</footer>
</body>
</html>
Even with less modifications it wasnt working properly, and when i leave the position as sticky, there is no error it just stays like it was relative, eventhough in the html code that’s generated in the browser it stays as sticky
If you need more information feel free to ask 
position: sticky only does something if you have one of top, bottom, left, or right set, so maybe that’s your problem? Something like top: 0 is typical to stick things to the very top of the screen.
You may have further issues doing this though, because sticky doesn’t really work well on elements that are contained inside height-constrained containers like the header. For example, it’s probably easier to get sticky working on header (which is contained in the body), rather than the nav inside header. You may need to move things around or change other styles if you want to do this with the nav specifically.
I’ve tried setting top: 0; but it doesent seem to work, i think that something doesnt underestand this type of position. As you can see the Nav doesent seem to work evethough the html is there.
and for the changes i would have to make im well aware of them, and at the end i realized that it really didn’t make much of a diference and is less trobule to just let the position be relative, but even with that i would love to know why the sticky didnt work in the first place.
Thanks for the help and if we can solve this it would be really nice
Thanks as always 
As jflatness notes above, the position: sticky applied to the <nav> element won’t work because it is within the <header> element, which is not being scrolled. It’s the <body> element that’s scrolling.
So you can either move the elements around in your PHP file, and put the <nav> outside of the <header>, or you can use position: sticky on the <header>, but then apply a negative top value that compensates for the part of the <header> you don’t want to show at the top.
Note that this really only works well if you have fixed heights for both the <header> and <nav> elements. And, if the heights of those elements change based on screen size responsiveness, you’ll want to apply different styles to different screen sizes.
Assuming that’s okay with you, then something like this should work:
nav {
height: 42px;
}
header {
height: 366px;
position: sticky;
top: calc(42px - 366px); /* height of the nav minus height of the header */
z-index: 2;
}
This fixes the height of the <nav> and <header> and then uses those values to set a negative top position, so that the <header> element stops just before the <nav> element begins to disappear from view. You may, of course, want to adjust the height values based on your theme.
This topic was automatically closed 360 days after the last reply. New replies are no longer allowed.