How customize primary menu?

Hi there,

How can I customize the primary menu? For example, I need it in bold, but just this menu. Is there a way?

My site: www.aurumnutricao.com.br

Thanks a lot!

Hi,

To make the specific menu bolder, you can use chrome dev tools to inspect the ID element of the menu and add css code.

Here is the example http://prntscr.com/9o7ech

li#menu-item-10851 {
    font-weight: bold;
}

And you can put the css code using simple custom css plugin

Hi Awan, thanks for your answer!

I made like you advised me, but the menu was divided in two lines… is there a way to increase the menu’s area, in order to be more near the logo? I think so the menu will fit on one line.

Thanks in advance!

Oh I see…

There is two ways to reduce the width of the header content.

  • Using child theme
  1. create a child theme
  2. duplicate header.php from parent theme to the child theme
  3. change this line:
    <div class="site-branding col-md-4">
    to:
    <div class="site-branding col-md-3">

and change this line:
<nav id="site-navigation" class="main-navigation col-md-8" role="navigation">
to:
<nav id="site-navigation" class="main-navigation col-md-9" role="navigation">

  • or using custom css:
.site-branding.col-md-4 {
    width: 25%;
}

.main-navigation.col-md-8 {
    width: 75%;
}

Hi Awan,

Your solution worked perfectly!

Thanks a lot!

Great!

Feel free to ask here if you need more helps :slight_smile: