Hello Timer,

I checked Skylar and I see that the wrapper of the the header_main css class has two padding parameters that prevents the logo and the menu (desktop view) to have the same borders as the content below.

.header_main > .wrapper960 {

  display: flex;

  position: relative;

  box-sizing: border-box;

  padding: 0 20px;

  padding: 0 var(--j51-grid-column-gap);

}

If you set the following to your custom.css this should help:

.header_main > .wrapper960 {padding: 0;}

Maybe you must add " !important", but as far as I see it should work without.

With the mobile problem it would be helpful if you post the url to the site so it is possible to see if the problem maybe comes from the size of the mobile logo or from anything else.

Regards
Oliver

Hello Oliver!

Thank you for your reply and help! Unfortunately this solution does not work perfectly. See the attached image. The menu has indeed been moved closer to the edges, but not perfectly fitting. Inserting the "!important" line does not change this.

I think the problem is that there is one more module there: the module for displaying social media icons (part of the template). I just set up an instagram contact as a test, so this module is also displayed on the page.

You can view the page here:

https://www.millephoto.hu/hu

Hello Timer,

as far as I see there is a margin left and right of each menu item.

The CSS looks like this:

.hornav > ul > li {

  position: relative;

  display: flex;

  padding: 0;

  margin: 0 12px;

  list-style: none outside none;

  transition: all .4s;

}

The margin: 0 12px; means no margin to top and bottom but 12px to the left and to the right.
To have no margin to the right you should change it to this:

.hornav > ul > li {

  margin: 0 0 0 12px;

}

This means there is only a margin to the left (margin and padding values always go top right bottom left like a clock ^^).
If then the space between the menu items is to narrow just change the value to for example: margin: 0 0 0 24px; (why 24px? between the items is currently a margin 12px to left and to right, so the space between two of them is 24px)

If you disable the social media bar than the menu item should fit to the right border of the content.

I testet it on your site and for me it looks okay (see screenshot, I changed the background color to better visualize it).

If the socialmedia is empty it should collapse without using space (normally J51 modules do so...). I set display to none so it disappeared without using space, but I haven't testet it on a live system yet. If there is still a gap, disable social media and I will have another look, okay?

Hope this helps
Oliver

Thank you very much, Oliver! I have a dumb question: which CSS file are we talking about exactly? Sorry, I don't know much about web design and web programming. The template.css does not contain these lines. And in nexus.css, I can make any changes, they have no effect

Hi Timer,
first of all: a question is never dumb

The Skylar template, like nearly every template of J51, gives the possibility to write the own CSS to a custom.css file.
To activate this possibility goto your administration and then to Extensions > Templates > J51 Skylar
In the template there is a tab called CUSTOM CSS. At "Load custom.css" switch from "No" to "Yes".

Now you should add a new file, called custom.css, to your template/j51_skylar/css/ folder.
I do this with a FTP program like Filezilla for example.
If you are not used to a FTP program, I recommend to get in touch with such a program. FileZilla is free and a very good tool and you find it here: https://filezilla-project.org/

If you have this custom.css file you should place every change in styles to this file. You need no HTML styles declaration like
<style type="text/css"> </style>.
Just write the classes in this file.

The big advantage is that it will not be overwritten if you update the template. And you can do all changes here. With such a custom.css (which can be found in nearly every template of every template company) you can change the style of a template completely.

If you change nexus.css or template.css all your changes are gone after you update the template.
So I recommend NEVER change any of the css files except of your own custom.css.

A good CSS tutorial you can find here: https://www.w3schools.com/css/default.asp.
We talked about changing the margins. Everything about css margins you can find here: https://www.w3schools.com/css/css_margin.asp

Hope this helps.

Regards
Oliver

Hello Oliver!

Thanks for your detailed reply and the links to the CSS tutorial! It works fine now! Thanks again for your help!

Hello again.

I have similar problem.

left hornnav language menu push main menu to right side and it's not in the middle.
And the flags caps is to big.

How to solve this?

Thank you.

Hi Freelance

Would you have a URL to an example of this issue?

Ciaran

Hi Freelance

Would you have a URL to an example of this issue?

Ciaran

PM

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.header-1 {

    position: absolute;

    left: 0;

    top: 0;

    margin: 0;

    padding: 0;

}

.header-1 .mod-languages ul li {

    line-height: 1rem;

    padding: 0;

    margin: 0;

}

Ciaran

Thanks.

It almost works, but now only the first language flag is active, others cannot be selected.

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.header-1 {

    position: absolute;

    left: 0;

    top: 0;

    margin: 0;

    padding: 0;

}

.header-1 .mod-languages ul li {

    line-height: 1rem;

    padding: 0;

    margin: 0;

}

Ciaran

Hello

My apologies. To amend replace the suggested CSS with the following...

.header-1 {

    position: absolute;

    left: 0;

    top: 0;

    margin: 0;

    padding: 0;

    z-index: 10;

}

Ciaran

Thank you!

Hello

My apologies. To amend replace the suggested CSS with the following...

.header-1 {

    position: absolute;

    left: 0;

    top: 0;

    margin: 0;

    padding: 0;

    z-index: 10;

}

Ciaran