Top Menu - moving logo and menu items wider, changing font

Hi Movin,
first I am sorry to post my original question in a wrong way. Just couldn’t find this page to post my thread :wink:

The questions are:

  1. how could I move the logo area more to the left (less margin from the edge of the page)? The same applies for a symmetrical menu item (search) on the right side.
  2. How to make a logo in the top menu a bit taller? This also forces me to make the whole menu a bit taller.
  3. how may I substitute the top menu fonts (also second and third level) with the font that I downloaded to style.css. First I uploaded the fonts to the server (into wp-content/fonts catalogue), then i updated style.css with:

@font-face{
font-family: Caveat-Bold; Caveat-Regular
src: url(‘http://langanki.ayz.pl/domains/igafijalkowska.pl/public_html/wp-content/fonts/Caveat-Bold.otf’);
}

for every uploaded font.
4. Finally I have fonts in the top menu grey, turning white when hovered over, how may I turn it around. I would like to have white menu turning grey when hovered over.

Otherwise I admire the theme and your support. It is not so usual these days. I also bought another theme, posted my questions three times and still wait for answers.

Thank you.

Lukasz

Now I try to write into Shapely Options CSS:
}
#page .menu li a {
font-family:Caveat-Regular;

And nothing happens.

Hi Lukasz,

I hope you are well today and thank you for your questions.

1. how could I move the logo area more to the left (less margin from the edge of the page)? The same applies for a symmetrical menu item (search) on the right side.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

.container.nav-bar {
    width: 100%;
}
2. How to make a logo in the top menu a bit taller? This also forces me to make the whole menu a bit taller.

Use the below CSS code to achieve this.

@media screen and (min-width: 37.5em){
#page .nav-bar .module, #page .nav-bar .module-group {
    height: 80px;
}
#page div.nav-bar .module.left > a {
    height: 80px;
}
img.logo {
    max-height: 100%;
}
ul#menu {
    margin-top: 15px;
}
}

3. how may I substitute the top menu fonts (also second and third level) with the font that I downloaded to style.css. First I uploaded the fonts to the server (into wp-content/fonts catalogue), then i updated style.css with:
4. Finally I have fonts in the top menu grey, turning white when hovered over, how may I turn it around. I would like to have white menu turning grey when hovered over.

Could you please share me your site URL where you are using it so that i can help you?

Best Regards,
Movin

Hello Movin,
thank you very much for your answer. I admire you and your ability to quickly solve our problems.

Is there any chance that you would also give me guidance over my two questions from the thread above? Namely:
3. how may I substitute the top menu fonts (also second and third level) with the font that I downloaded to style.css. First I uploaded the fonts to the server (into wp-content/fonts catalogue), then i updated style.css with:

@font-face{
font-family: Caveat-Bold; Caveat-Regular
src: url(‘http://langanki.ayz.pl/domains/igafijalkowska.pl/public_html/wp-content/fonts/Caveat-Bold.otf’);
}
for every uploaded font.
Now I try to write into Shapely Options CSS:
}
#page .menu li a {
font-family:Caveat-Regular;

And nothing happens.

  1. Finally I have fonts in the top menu grey, turning white when hovered over, how may I turn it around. I would like to have white menu turning grey when hovered over.

I also have one additional question:

How to make a bootm margin of a menu bigger? So that the menu words are a bit further from the page background

Thank you in advance, Lukasz

3. how may I substitute the top menu fonts (also second and third level) with the font that I downloaded to style.css. First I uploaded the fonts to the server (into wp-content/fonts catalogue), then i updated style.css with:

Please make sure you have used all font files as described on the below pages.

4. Finally I have fonts in the top menu grey, turning white when hovered over, how may I turn it around. I would like to have white menu turning grey when hovered over.

As said previously could you please share me your site URL where you are using it so that i can help you?

How to make a bootm margin of a menu bigger? So that the menu words are a bit further from the page background

To help us keep support thread separates could you please create new thread for your new question here https://colorlibsupport.com/c/shapely/ instead of replying on your existing thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Hello Movin,
thanks a lot for yourt help. I tried to follow the tutorials you attached and the last one is the best, so I managed to change my forn :wink:

The URL I am talking about is www.igafijalkowska.pl

Thanks in advance, Lukasz

You are most welcome here :slight_smile: