Editing the bar between header and content in PRO

Support
#1

Greetings,

I am trying to edit the navigation bar that allows to go between posts. If you look at:

https://www.pauledney.photography/autumn/

it is the entry-title item with the two arrows and the word “AUTUMN.”

That bar never appears in the content inspector (the content stops at the images) and doesn’t appear in the header inspector either (it is below the header). I also looked in the Theme options and couldn’t find anything there.

I finally got to edit the text (to some extent, see issue #4), change the arrow colors, and float the arrows to the left of the title by adding custom CSS to the headers. I looked at the forums and found some CSS for some aspects, which helped, but nothing on the responsive issue. So, a few problems remain:

  1. Those arrows disappear on mobile devices and I want them to stay. As I cannot select the item, I cannot tell it to appear on all layouts.
  2. The arrows don’t go flush left with the gallery, even with margin-left: 0px, padding-left: 0px, and float: left.
  3. No matter what vertical alignment scheme I try, I cannot get the text vertical-centered on the arrows (the current design is as good as I got it).
  4. If I choose a very thin font-weight for the entry-title, say 100, I do see it correctly in the “live” preview in PRO, but not on the actual web page. The font-weight does get lighter, but not as much as one would expect. I tried changing “Body,” “Inherit,” and such, but nothing seems to avoid the issue. Also tried to put “!important” in the CSS (see code below), but that didn’t do anything either.

Where, in PRO, do edit that layer that is between the header and the content?

Thanks!

Paul

The custom Header CSS is:

div.x-nav-articles {
display: inline;
float: left;
margin-left: 0px;
padding-left: 0px;
}

h1.entry-title {
display: inline;
font-family: Raleway;
font-weight: 300 !important;
line-height: inherit;
margin-left: 1em;
}

a.next, a.prev {
background-color: #000;
}

#2

Hi There,

This changes need to be done via CSS.

There is not sorting on mobile because there is no grid on mobile and the images stack.

To align the title and arrows, you can add the following CSS to Theme Options,

h1.entry-title {

    line-height: 1.5;
}

Your font has 300 weight right now, you can add 100 if you want thinner.

If you can´t see that clean your browser cache and test it again.

Thanks!

#3

Thanks, Joao. line-height worked perfectly.

Regarding the arrows, they are not for sorting. The “<” and “>” to the left of the gallery title, such as in https://www.pauledney.photography/winter/ next to “WINTER” actually move to the next gallery, which is a post. Those arrows disappear on mobile, yet are not replaced by some swipe option. I cannot seem to find where to specify that these buttons should be visible in every view/device.

Cheers,

–P.

#4

Hi,

To make it visible in mobile, you can add the code below in PRO > Launch > Theme Options > CSS

@media (max-width: 767px){
.single-post .x-nav-articles {
    display: block !important;
}
}

Hope that helps.

#5

Thank you, @paul.r ! This worked perfectly. I was trying to edit the “Content” area, not realizing that this was actually part of the theme itself. Problem solved!

Cheers,

–P.

#6

Glad to hear it!

Cheers