I have a display problem with the Design Divi. Please visit https://inrei.de/de/kontakt/ first. Here the caching is deactivated for testing (by shortcode). If you scroll down on the page, the logo will get smaller in the fixed navigation. This is how it should be.
Now go to any other pag of the website. For example: https://inrei.de/de/ueber-uns/ (cached page). If you scroll down the page now, the logo will not get smaller. The worse thing is that there is now a gap between the top red bar and the logo. When scrolling, the background shines through. This happens in Chrome, Firefox and not in the new Edge (Chromium). It also doesn’t happen in normal Chrome if you are logged in as admin and the admin bar of WordPress is shown. When I switch off the caching everything works fine. But the complete caching must be deactivated. The deactivation of the functions to combine / compress HTML, CSS, Javascript in WP Fastest Cache alone makes no difference.
Any idea?
Thank you
Guido
I am in the early stages of a website that will be built on WordPress. The theme has not been chosen yet. However, in my early sketches I have identified a specific navigational feature which after some searching seems to be referred to as ‘4-corner navigation’ or ‘all-caps corner links’. I have done extensive searching but have not found a theme or plugin that can do this, except for the Divi theme (see link). I’m not sure I want to go with the Divi theme so I’m wondering if this technique would work on other themes or if someone know of any theme or plugin with this functionality?
Thanks in advance,
Michel.
I am trying to add a nice box-shadow to my (fixed) top-header. Actually, I thought that was quite straightforward – just add the following snippet to your child-theme:
.et-fixed-header#main-header {
-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
}(I added the !important tags in a state of advanced dispair….). Turns out that does not work. That CSS is constantly overridden by a small snippet that “comes from nowhere”:
.et-fixed-header#main-header {
box-shadow: none!important;
}What a nasty little bastard! And I could not figure out where it comes from. It keeps returning even after I deleted all possible caches and temporarily stored stuff (also locally stored stuff, which I deleted through Chrome Inspect). The source is given by (index):115 through Chrome Inspect. When clicking on that link I can see that it is an index.html file (<!DOCTYPE html>) where line 115 begins as follows: <style id=”et-divi-customizer-global-cached-inline-styles”>body{color:#000000}h1,h2,h3,h4,h5,h6{color:#000000} […] Much further to the right of that line I can see the little bastard: .et-fixed-header#main-header{box-shadow:none!important}.
Any suggestions on how to get rid of that in order to simply show that box-shadow (which I can see works properly when I manually deactivate the little bastard through Chrome Inspect).
Thanks a lot, Philip
]]>I’m using the TOC widget on the sidebar as affixed/pin. When I scroll to the bottom, it continues being fixed and overlaps the footer, covering information on the footer. Can the TOC widget stop being fixed when it reaches the bottom of the content area?
Thanks.
https://www.ads-software.com/plugins/easy-table-of-contents/
]]>I am using the Sela theme on prettyhealthy.co, and I made it fixed navigation. I have two problems.
First, I cannot make the page titles lowercase using text-transform: lowercase (it doesn’t seem to work, but it worked with the widget titles, so what am I doing wrong?).
Second, when I made the navigation fixed, it was either under or over the wordpress admin bar so that one is unusable–I’d like the two to stack like they are meant to, with the admin bar at the top of the page and the navigation bar completely visible below it. This is how it displays in premade themes with fixed navigation (like the plane theme). How can I make this happen in CSS?
Also, here is the CSS if it helps!
nav#site-navigation.main-navigation {
background-color: #ffb9ab;
font-family: 'Montserrat';
top: 0;
left: 0;
right: 0;
position: fixed;
z-index: 100000;
border-bottom: solid #ffb9ab;
}Thank you for reading!
]]>I have a fixed navigation bar at the top of my website that stays with you as you scroll down the page.
Until I installed woo, I had no problems with it.
Now on my woo product pages and cart check out, the page content scrolls over the fixed nav.
Here’s a picture of what I mean https://i.imgur.com/IpG13Ag.png
Any ideas on how to fix this or what could be causing it?
Thank you!
]]>My client uses a child theme of Thematic, which was created by another designer. I am working on some changes to this child theme. One of the changes is making the navigation bar fixed, as it is on my site (which uses a child theme of Enfold by Kriesi).
In Firebug, I was able to move div id="access" (which contains the main navigation menu) above div id="branding" (which contains the logo; after this and the header div are closed, the main div starts). From there, I was able to make the navigation bar fixed in Firebug. Some issues persist with that, but we seem to be on the right track.
How would I be able to move the navigation bar above the branding in the theme code?
Thanks,
David
except for the front page I disabled all the sliders everywhere. But without the sliders the header navigation is not fixed/sticky anymore when I scroll down the blog and the pages.
Could you please tell me where/how I can manage to make the headers without sliders fixed/sticky, too?
Further I would like to know how to control the position where the fixed/sticky header on the front page appears. Right now it is after the slides but I would like to have it fixed right after I begin to scroll.
My page is: https://ikmeaa.org/
]]>Here’s what’s happening..
1. Offset value is set to the fixed nav class “.fixed” ( I’m at the very top of the page and i click one of the anchor links )
Navigation overlaps the content, but when i click an anchor link again on the fixed menu. It works just fine.
But again, if i click an anchor link at the very top of the page without the menu being fixed.. it overlaps.
2. Vice versa ( Offset value is set to the not-fixed nav class “.not-fixed” )
Navigation overlaps the content, but when i click an anchor link again on the NOT fixed menu(VERY TOP OF THE PAGE). It works just fine.
But again, if i click an anchor link on the fixed menu with the menu being fixed.. it overlaps.
******************************
Additional Question: maybe something like this needs an if statement?
If yes, on what file can i edit and how?
https://www.ads-software.com/plugins/page-scroll-to-id/
]]>I’m pretty much a total newbie in CSS so please bear with me
I have created a second blog to experiment with my layout: https://hearnshtest07.org
I am using the Omega theme (don’t know if that matters).
Ideally, I would like my navigation bar to be the same width as the content & sidebar portion of the page, as it is on this site: https://www.peaceloveshea.com
I’ve been fiddling with the code for a while and just cannot seem to get it right. Any suggestions on doing this in a way that will render the same look on different screen sizes?
I’ve tried changing the width% (in the second chunk of code) and it works but puts the entire nav to the side. Then I am able to centre it by changing the ‘left’ property (in the first chunk), but I suspect there is a better way to do it so that it will work on all pages.
Any help is appreciated!
.omega-nav-menu {
position:fixed;
background: #000000;
top: 30px;
left:0px;
margin-right: auto;
margin-left: auto;
height: 50px;
z-index:999999;
padding: 20px 20px;
text-align:center;
}
.omega-nav-menu,
.omega-nav-menu > ul {
clear: both;
color: #999;
letter-spacing: 1px;
line-height: 1;
margin: 0;
padding: 6px 6px;
width: 100%;
text-align: center;
}
.omega-nav-menu .menu-item,
.omega-nav-menu .page_item {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
}
.omega-nav-menu a {
border: none;
color: #918f90;
display: block;
padding: 10px 10px;
position: relative;
}
.omega-nav-menu .sub-menu,
.omega-nav-menu .children {
left: -9999px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 200px;
z-index: 99;
}
.omega-nav-menu .sub-menu a,
.omega-nav-menu .children a {
background: #fff;
border: 1px solid #eee;
border-top: none;
font-size: 14px;
letter-spacing: 0;
padding: 10px 10px;
position: relative;
width: 200px;
}
.omega-nav-menu .sub-menu .sub-menu,
.omega-nav-menu .children .children {
margin: -54px 0 0 199px;
}
.omega-nav-menu .menu-item:hover,
.omega-nav-menu .page_item:hover {
position: static;
}
.omega-nav-menu .menu-item:hover > .sub-menu,
.omega-nav-menu .page_item:hover > .children {
left: auto;
opacity: 1;
}
.omega-nav-menu > .first > a {
padding-left: 0;
}
.omega-nav-menu > .last > a {
padding-right: 0;
}