Extra Navigation Menu should be exactly below main navigation

I want to add my secondary navigation to main navigation exactly below main navigation

  • Sajid
    • DEV MAN’s Sidekick

    Hi @bharathfriendsmeet,
    Hope you are doing good today :slight_smile:

    I can see on your website both navigations are under each other as seen in attached screenshot.

    Is there something else you want to do ? If yes then would you mind sharing more details with the help of a screenshot. So I know what exactly you are trying to accomplish.

    Look forward towards your response :slight_smile:
    Cheers, Sajid

  • Nastia
    • Support Rock Star

    Hello bharath , I trust you are doing well today!

    My apologies for late reply!

    I've visited your page and see only one main menu

    If you still wish to fix this, please enable the support access so we could have a look at your settings and provide you with the CSS code. Also, please enable the secondary menu, so it will be visible.

    Please let us know when you do.

    Kind Regards,
    Nastia

  • Panos
    • SLS

    Hello @bharathfriendsmeet,

    It seems like a security plugin is blocking me from logging in, but lets not be concerned about this.

    I had a look at your navigation menus, and the layout as it is might not be convenient. It is hard to style them as you want, the responsive menu is only in English and the links don't react properly when hovering (try hovering hovering them and you will notice that the cursor changes to pointer in unexpected positions)

    So I have a suggestion approaching this a bit differently. I would recommend using one main navigation since the English menus and your language menus link to the same pages, and you can add a description for each menu item. To add a description first you have to show them from the "Screen options" at the top-right corner of the menus page.

    Or, instead of a description, you may try changing the menus title to html, for example:

    <span class="top-item">
    <span class="nav-icon icon-home"></span>
    Home
    </span>
    <span class="sub-item">
    ???????
    </span>

    This way it will be much easier to manage and style. Please let me know how you think of this.

    Looking forward to your reply!

    Kind regards,
    Panos

  • bharath
    • Design Lord, Child of Thor

    <span class="top-item">
    <span class="nav-icon icon-home"></span>
    Home
    </span>
    <span class="sub-item">
    ???????
    </span>
    where i need to put this code in header and how it will append to each English navigation. please send code i will do that changes

  • Panos
    • SLS

    Hello @bharathfriendsmeet,

    I suggest inserting that code in your menu item title. To do so, go to your admin > Appearance > Menus.

    Create a new menu so you can test first. Add your pages and replace the titles accordingly with some html code which you can then style easier with CSS.

    You need to be careful while inserting the html code, since I noticed that the code you pasted in your reply is missing a closing </span>

    You may follow instructions of this video.

    After you insert your html, you can use some css to style the menus like:

    .primary-navigation .sub-item{
    display: block;
    }

    I hope you find this usefull!

    Thanks,
    Panos

  • bharath
    • Design Lord, Child of Thor

    Hi, Thanks for your response

    but nav icon adding extra to my menu when i use the code as u suggested
    I changed html code in menu as you suggested but it was displaying extra icons
    i used this code
    <span class="top-item"> <span class="nav-icon icon-home"></span> Home </span> <span class="sub-item">???????</span>

  • Panos
    • SLS

    Hello @bharathfriendsmeet,

    I am not sure I understand what you mean with

    but it was displaying extra icons

    Please make sure that you insert the html code once only in each menu item.

    As fr it's styling, here is some CSS you can use, just make sure you use your own image. I have used the one from the example only as a demo.

    #nav-container{
      background-image: url(http://content.screencast.com/users/PanosLyrakis/folders/Default/media/8c94e8b4-eaa1-4d67-97e3-d558418d80dd/background.png);
      background-repeat: repeat-x;
      background-position: center center;
      padding-right: 20px;
    }
    
    #nav-container .menu-item{
      text-align: center;
    }
    
    #nav-container .menu-item .sub-item{
      display: block;
    }
    
    #nav-container .menu-item a{
      color: #ffffff;
    }
    
    #nav-container .menu-item a:hover{
      color: #f68c17 !important;
    }

    One important note here is the rights of the image I am using in the demo. I have it temporarily for you to try and see how it looks, but it will be removed it soon. In order to be legally covered, please use on of your own images and make sure it has 70px height.

    In case you have the copyrights of the image you attached in your previous reply, then it is OK to use the one in the demo, the only thing is that you need to download it first. You can download the image from this URL and upload it to your host (perhaps in your WordPress Media). Finally don't forget to replace the background-image in the CSS I provided.

    Please let us know if you need any further assistance!

    Kind regards,
    Panos

  • bharath
    • Design Lord, Child of Thor

    Hi panoskatws I am very happy with your suggestions. Thank you

    I got this after working on above css code . Now I need to decrease my width of background to end of navigation as shown in this image . and also I want to place navigation links to centre of background leaving place top and bottom of background .

  • Panos
    • SLS

    Hey @bharathfriendsmeet,

    My pleasure :slight_smile:

    If I understand correctly perhaps the following CSS might help:

    #nav-container .menu-item{
      background-image: url("http://www.telugurachayita.org/wp-content/uploads/2016/03/bck4.png");
      height: 70px;
    }
    
    #nav-container .menu-item:first-of-type{
      -webkit-border-top-left-radius: 10px;
      -moz-border-radius-topleft: 10px;
      border-top-left-radius: 10px;
    
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
    }
    
    #nav-container .menu-item:last-of-type{
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
      border-top-right-radius: 10px;
    
      -webkit-border-bottom-right-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
    }
    
    #nav-container #nav > ul > li > a{
      padding: 20px 20px;
    }

    I tried to place the background on the ul, but for some reason it wouldn't show, so I placed it in the li instead. This may cause breaking the menu when resizing the browser, so you should add some @media rules.

    Hope this helps!

    Kind regards,
    Panos

  • bharath
    • Design Lord, Child of Thor

    do i need to add this code to previous code or i should replace the below code
    #nav-container{
    background-image: url("http://www.telugurachayita.org/wp-content/uploads/2016/03/bck4.png");
    background-repeat: repeat-x;
    background-position: center center;
    padding-right: 20px;
    }

    #nav-container .menu-item{
    text-align: center;
    }

    #nav-container .menu-item .sub-item{
    display: block;
    }

    #nav-container .menu-item a{
    color: #ffffff;
    }

    #nav-container .menu-item a:hover{
    color: #AC3B18 !important;
    }

  • Panos
    • SLS

    Hello @bharathfriendsmeet,
    Hope you are having a lovely weekend!

    You only need to add the CSS from my latest reply, but you will need to remove (or comment out) this part from you code:

    #nav-container{
      background-image: url(http://....../background.png);
      background-repeat: repeat-x;
      background-position: center center;
      padding-right: 20px;
    }

    Best wishes,
    Panos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.