Site title in menu

[jvonc]

I’m building a site where the site title is on the topleft and behind it in the same line the menu is following.

I’m looking for a solution to add the site title into the menu to prevent the weird changing gap between site title and menu. (Somehow the distance between the both is changing within different resolutions...)

I already tried to ad a custom link to the menu but wasn’t able to change then afterwards the look and target of this one particular element via custom css/html.

Is there maybe an easier way?

This is how it should look like in the end – but here are the two elements still separated as Site Title and Menu:

[mariusjopen]

Dear @jvonc
can you post a link to your website?

One idea would be to use CUSTOM CSS for this.

Best!

Marius

[jvonc]

Hi @mariusjopen,

you can find the website under: of.jonascarstens.com

I tried some things in Custom CSS/HTML but didn’t came to a solution how to add the site title to the menu.

Best
j.

[mariusjopen]

Dear @jvonc

does that help?

.laynav.primary {
    left: 36vw;
    padding-top: 1px;
}

Best!

Marius

[jvonc]

Hi @mariusjopen,

thanks for that – but unfortunately this doesn’t solve my problem.

I want to embed the site title into the unit of the menu to have everything in a straight line.

The closest I got so far was to add a custom link to the menu and name it like the site title. But I didn’t found a solution to change the look of that custom link.
In this case I would get rid of the site title entirely.

Best
j.

[mariusjopen]

@jvonc
with the code I sent you - I got it in one line.

Try to add !Important to the CSS.
It should be doable in CSS:

Best!

Marius

[jvonc]

@mariusjopen

The only thing that happens when I put this code into the Custom CSS is that the menu gets a larger distance to the site title:

Of course I could change the distance in the code, but the "Space left" of the site title is set in % so that’ll change whenever the screen has a different resolution. So that wouldn’t really solve the problem besides on my own screen.

What I want is to have the same distance between "Ossian Fraser" and "Works" as between every other menu element. In the customizer it’s only possible to set the distance the the edge of the website – is it maybe somehow possible to set this as a relation to the site title?

Best
j.

[mariusjopen]

Dear @jvonc

this is responsive:

.laynav.primary {
    left: 36vw;
    padding-top: 1px;
}

this would be exact pixels:

.laynav.primary {
    left: 100px;
    padding-top: 1px;
}

You can adjust it like you want.
And then with media queries you could adjust it for mobile.
I would do that.

Best!

Marius

[jvonc]

Hi @mariusjopen

I finally figured out how I solve my problem. Your code was helping indeed:

.laynav.primary {
    left: calc(5vw + 140px);
    padding-top: 1px;
}

With that workaround I make sure that the distance to the site title is always the same.

Best
jonas.

[mariusjopen]

Dear @jvonc
ha! The good old calc :-)

Best!

Marius