Header Menu not showing in sequence

(Siraj Mahmood) #1

@Simon_Cossar !! Recently we setup header one menu nearly with logo but now I’m trying to add another one menu ahead previous one but it is showing this second menu under the header. So that is why I’m sharing both images for better understanding.

We using are using this coding behind this menu so please check it out and let me know.

Thank you.

(John Muhl) #2

Instead of duplicating the navmenu your second item probably needs to be in the same div#navmenu as the first; e.g.

<div id=navmenu>
  <ul class=nav>
    <li>first thing</li>
    <li>next thing</li>

(Siraj Mahmood) #3

@johnmuhl after done the same this which you emphasize, results are below

(Nathaniel Mattocks) #4

Yeah, that did not fix it very well… :frowning:

(Siraj Mahmood) #5

Is there anyone, who can fix this problem??

(Alan Tan) #6

Could you post your CSS here?

(Siraj Mahmood) #7

you may see it below…

Next Lines …

(Alan Tan) #8

Try changing

.nav li {
  list-style: none;


#navmenuv .nav li {
  display: inline;

(Simon Cossar) #9

Then you need to display the list-items inline block so that they will display in the same row.

li {
  display: inline-block;

It might be a better idea to use the “header-after-home-logo” plugin outlet to get your menu items into the nav menu. The way things are being positioned now is a bit of a hack.

(Siraj Mahmood) #10

How this one thing will be possible?

(Simon Cossar) #11

I can add some detail later if you are stuck.

(Simon Cossar) #12

Here’s a plugin that adds an input to the admin area for adding links to the Discourse header. It will accept anything except a script tag, so you can add links with icons if you like.

(Siraj Mahmood) #13

@Simon_Cossar will you please tell me that can we add font awesome icons with link through this plugin…

(Mittineague) #14

Have you tried adding an “i” tag? eg.

<i class="fa fa-plug"></i>

(Siraj Mahmood) #15

@Mittineague I was saying font awesome will work with above mention plugin??

(Simon Cossar) #16

Yes, just copy the link that you are using on your site now. You will need to adjust the top margin on the .extra-header-links class. Try .extra-header-links { margin-top: 0; }

<i class="fa fa-bullhorn fa-lg"></i>What is KI forum?

<img src="//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/a/8/a875267dca755b43174904faac54dbbc3218c66c.png" width="690" height="114">

(Siraj Mahmood) #17

@Simon_Cossar Great now it is working, will you please tell me two things, first is how we can put space between icon and link? Secondly how to change link color and hover color??

(Jeff Atwood) #18

It is not in scope of this site to teach you CSS. I suggest learning more about CSS on your own, or hiring someone to assist with your CSS.

(Simon Cossar) #19

In a couple of weeks I will have a forum for answering this kind of question. The forum is for a business, but we give away lots of free samples. In the meantime, most of what you are trying to do you can figure out yourself by playing with Chrome Developer Tools Chrome DevTools Overview - Google Chrome.

The basic idea is to open up the DevTools window on the page you are trying to change. You can then change your site’s css and html inside the DevTools window until you have it looking the way you want. If you are working with Discourse, all you have to do from there is copy your changes into the Discourse custom CSS/HTML editor.

It might be worth making a ‘howto’ topic on this site for how to customize Discourse with Chrome DevTools.

(Mittineague) #20

[shameless promotion ahead]

IMHO this is the place to ask “please add a class / id to this tag” if you find that no combination of selectors is working. (at rare times they’re too general and target things you want them to not target no matter how specific you try to be)

But for general knowledge I recommend