- This topic has 7 replies, 2 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
October 1, 2020 at 5:30 am #1466998Ketil
Hi. Used “Read” for a site, discovered something wrong in article header, some css-problem it looks like. Categories, header and date/author is on the same line. What to do to fix?
October 1, 2020 at 5:47 am #1467023DavidStaffCustomer SupportHi there,
your header element content is wrapped inside a DIV with the class of
inside-header
And then you have this CSS in Customizer > Additional CSS which is inlining that content:
.inside-header { display: flex; align-items: center; }
I would suggest removing the
inside-header
class from that DIVOctober 1, 2020 at 6:17 am #1467072KetilThank you, David!
October 1, 2020 at 6:43 am #1467127KetilAnd now I remember, this code I got from support earlier, to vertically align the navigation with the logo.
@media (min-width: 769px) {
.inside-header {
display: flex;
align-items: center;
}
.nav-float-right .inside-header .main-navigation {
float: none !important;
margin-left: auto;
}
}
Is there a way to keep the navigation vertically aligned with the logo without messing up the header?October 1, 2020 at 6:57 am #1467163DavidStaffCustomer SupportKeep the CSS for the Alignment in the Header.
Then edit the Header Element – this line:
<div class="inside-header">
Change to:
<div class="inside-hero">
October 1, 2020 at 7:10 am #1467187KetilThat worked, thanks again!
October 1, 2020 at 7:25 am #1467215KetilAnd perhaps another sideeffect discovered, if you look at “previous/next” at the bottom of post, it looks a little strange. Related to this?
October 1, 2020 at 8:24 am #1467504DavidStaffCustomer SupportHmmm… thats Navigation is a custom element from the Site Library import ( Dispatch or Volume ) but i cannot see the CSS it requires.
Add this CSS to fix that:
#post-nav a { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 768px) { #post-nav a { -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; } } #post-nav, #post-nav .post-nav-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; } #post-nav { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 60px; } #post-nav .post-nav-wrap { background-size: cover !important; background-position: center center !important; min-height: 120px; height: 100%; padding: calc(6% + 1em) 5%; -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5); box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5); -webkit-transition: -webkit-box-shadow 500ms; transition: -webkit-box-shadow 500ms; transition: box-shadow 500ms; transition: box-shadow 500ms, -webkit-box-shadow 500ms; position: relative; box-sizing: border-box; } #post-nav .post-nav-wrap:hover { -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5); box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5); } .post-nav-wrap>* { color: #fff; } .post-nav-date { font-size: 0.9em; } .post-nav-title { margin: 5px 0 !important; } .post-nav { min-width: 60px; position: absolute; top: 0; border-radius: 0 0 2px 0; } .post-nav:first-child { left: 0; } .post-nav:last-child { right: 0; } .post-nav { padding: 6px 12px; border-radius: 3px; font-size: 0.7em; text-transform: uppercase; background-color: #ff1956; color: #fff !important; }
-
AuthorPosts
- You must be logged in to reply to this topic.