I can’t see how to send attachments so I will describe.
On the homepage at http://www.solid-steelband.com/wordpress there is a layer slider below which is an image placed in a color section with custom class which is supposed to hide it above 1024px but it doesn’t.
Also, the burger menu does not show up on iPad landscape – it does on portrait. So I have no menu at all on iPad landscape.
The full CSS is descrived below.
(how do I send attachments?)
—————————————————–
CSS in General Styling:
——————————————————
#top #header_meta .phone-info {font-size:16px; color:black;}
@media only screen and (max-width: 990px) {
.av-main-nav > li > a { padding: 0 5px; }
}
.main_menu ul:first-child > li > a { font-size: 15px; }
#top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a:hover .avia-menu-text{
color: #c3512f !important;
}
.avia-menu-fx {
bottom: 10px;
}

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}

—————————————
CSS in child theme styles.css:
——————————————–
@media only screen and (min-width: 768px) and (max-width: 1024px){
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special,
.html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
display: block;
}
}
/*—————————————-
// CSS
// Toggle view
//————————————–*/

/* Desktop */

.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
display: block!important;
}
.desktop-only{
display: none!important;
}}

Hi,
Why? Don’t have any answer to provide to the following questions?
1/ how to improve the fix? I mean at least augmenting the number of characters and lines displayed?
2/ how to filter and maintain it in enfold-child/functions.php instead of loosing the fix each time Enfold is updated?
3/ what about the content (entry-title) which is never entirely displayed (truncated or ellipsis truncated) even if the avia-post-nav prev and next have their dimensions up sized or if the font used has its size reduced? (from my own point of view the code is buggy here since it breaks the content randomly)
Thanks for any kind help.
Best regards.
Gilles

It didn’t work as expected. I found a perfect solution. It’s simple and works perfectly

.h1-ueberschrift
{
font-family: UniversLT-CondensedBold, Arial,sans-serif;
font-size: 3em;
font-weight: normal;
line-height: 1.7 !important;
color: #ffffff !important;
background-color: #000000 !important;
display: inline;
text-transform: uppercase;
padding-top: 1.8%;
padding-right: 0;
padding-bottom: 1.0%;
padding-left: 0%;
box-shadow: 0.25em 0 0 #000000, -0.25em 0 0 #000000;
}

Thanks for your help.

I got it:

#menu-item-3799 > a::before {
    content: "\e824";
    font-family: entypo-fontello;
    font-size: 20px;
    padding-right: 6px;
    vertical-align: text-top;
}

Topic can be closed, thank you.

WOW, thanks..

But, when I go to the other pages with the smaller header, the logo goes behind the menu some and is not centered correctly any more.

Also, if I want to make the social icons bigger, I just need to change the font-size:18px to something else, is that correct??

Thanks again for all your help

Hi,
Thanks for the tip which appears to be a harsh solution.
You see, entry-title is a semantic chain which has to be displayed in a specific order: illustrator (if exists), author, and title, this one has to be display after a line break. Displayed now it fits quite the container. Well, thanks. As a result it emptied the semantics expected. That’s why it appears to be a poor solution mostly because regardless to the semantics, entry-title is randomly truncated (between 39 and 58 characters, and 2 to 3 lines displayed)
Nevertheless, several questions remain regarding the avia_post_nav:
1/ how to improve the fix? I mean at least augmenting the number of characters and lines displayed?
1/ how to filter and maintain it in enfold-child/functions.php?
2/ what about the content (entry-title) which is never entirely displayed (truncated or ellipsis truncated) even if the avia-post-nav prev and next have their dimensions up sized or if the font used has its size reduced?
3/ what about the avia-post-nav prev and next background color & opacity which seems not to be modified (please read my previous message) ?
Styling avia-post-nav is not that simple!
Thanks for any kind help
Kind regards.
Gilles

I am trying to change H6 to a different font in Advanced styling, yes. It is not working. It is changing the size but not the font.

I am trying to change font colors in the Text Block individually on different pages. The whole second line of the text settings in the text block is gone including the strikethrough, horizontal line, TEXT COLOR. The box for text color gone. The line has disappeared. Can’t seem to find out how to get it back?

Thank you.

Pam

Hi Rikard,

thanks for quick response. I am familiar with doing some minor custom css fixings like e.g. definition of new breakpoints, font colours & sizes, … or hiding some elements of the page. But I have no experiences of “building” an new header layout from scratch. I guess, that my layout is not that complex, but what would you do recommend to do first? What are the next steps to get the new header style?

Kind regards,
Rainer

Hi Shannon,

thank you for your quick response.
As far as I know there is no custom css.

The Quick CSS-Box below “Fontsize” contains the following entry:

#footer, #footer p, #footer a { font-size: 12px !important; }
h1{
text-transform: none !important;
}
h2{
text-transform: none !important;
}
h3{
text-transform: none !important;
}

Hi Mike, I’ve just checked. Problems 2 and 3 completely solved, thank you!

1: I placed all my CSS in the stylesheet as suggested. Just two things are not working.

A: This CSS below is for the dimension of the icon in the icon list. I’m using it to make them smaller. And this is not working (I have a green line instead of the icon) as you can see here: https://www.viaggiareverde.it/capo-verde-informazioni-utili/
That’s the CSS code I used:

}
@media only screen and (max-width:767px) {
  #top .avia-icon-list .iconlist_icon {
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
  }

B: Before the installation of the Child Theme I had bigger photos in the magazine element (amost 2 times the “normal” dimension). If i’m not wrong I used this CSS code below (but maybe something else) to make them bigger. Now they are shown in the normal size.

.av-magazine-thumbnail {
    width: 150px;
    height: 120px;
}

I tried to increase the dimensions but nothing seems to work.

C: Just a question. I don’t remeber what is this CSS code. Do you know?

}
 #respond .comment-form-url {
display: none;
}

Thanks a lot for your help!

Regards

Luca