Hello

Could you provide a URL to this issue along with the selector you are using.

Ciaran

Hi Ciaran,
thnx for your answer and sorry for the double post. I provide the URL. Note that I have included the whole custom code in the template css box. However, there are still things that don't look the same on mobiles. Also I am not amused with how the logo changes/disappears through browser widths.

Here's an example of my custom code (can't upload custom css/txt in upload files)

/* Overriting horizontal rule */
hr {
height: 3px;
max-width: 90%;
margin: 15px auto 20px;
background-color: #2f72ff;
border: 0 none;
}

/* no dimming of page on menu hover */
.hornav > ul > li::after {
display: none;
}

Thank you

The logo will resize to the available space. Considering your menu, the available space is rather small on some screen sizes. To amend you have 2 options...

1. Increase the mobile menu breakpoint (Template Settings -> Responsive Options).
2. Allow the logo and menu to wrap by adding the following to the Custom CSS field of your template settings...

.header_main {

    flex-wrap: wrap;

}

Your current Custom CSS only effects HR tags. Checking your HR tags on all screens size, your CSS appears to take effect without issue.

Ciaran

Ciaran,
thanx for your prompt answer I will try this and come back to you.
As for HR tags: They only work as long as my formatting lives in the custom field of the template. As soon as I remove them from there, and they are only noted in custom.css, they will NOT work on mobiles but only on desktop browsers.

Another example:

/* Format external links */

a[href^="http://"]:after,

a[href^="https://"]:after,

a[href^="ftp://"]:after {   

 font-family: 'FontAwesome';   

 content: " ""\f08e";

}

It's the same, on desktops it's working, on mobiles not (when removed from template settings).

Cheers, Chris

Hi there Ciaran,
thank you so much for your tips, the header now does what I have expected. Custom.css seems to load also on mobiles, with the one exception: Ihave chanded the way, things noted as 'code' should displayed. That works in desktop browsers, but not on mobiles. I see that the original format in nexus.css should have

border-radius:3px;

but it hasn't on mobiles. Also the rest of my formatting only seems to apply to desktops

code {

   border: 1px solid #2f72ff;

   background-color: rgba(47, 114, 255, 0.2);

}

Any suggestions?
Cheers, Chris

Hi Chris

Could you try clearing the cache on your mobile device? In each case that we have tested, a mobile device is loading the CSS in the same manner as desktop. Using the Custom CSS field in the template settings to add your CSS, adds it inline in the pages head. Inline CSS is not cached by the browser which might explain the reason why you find a difference between desktop and mobile.

Ciaran

Hi Ciaran,
that did it - sorry, I feel so stupid. On a desktop browser this would come naturally, but on a mobile - the option is well hidden, so I did not think of it.
Thank you for your patience and have a nice day.

Cheers, Chris