Need help? Check out our Support site, then


Is it possible to have the primary menu in horizontal line?

  1. Hi, is it possible to have the primary menu in horizontal line, in order to have the secondary one as a vertical drop down (it is easier for the visitors to click what they want in this format)

    thanks

    The blog I need help with is panosantonopoulos.com.

  2. Check this out in the CSS preview and let me know what you think:

    #header-left {
      width:710px;
      padding-right:0;
      margin-bottom:20px;
    }
    
    .menu li {
      display:inline-block;
      padding-right:20px;
    }
    
    .menu li li {
      display:inherit;
    }
    
    .menu ul ul {
      left:0;
      top:20px;
    }
    
    #header-right {
      float:left;
    }
    
    #header-center,
    #header-right {
      width:340px;
    }
  3. nice!!

    2 more things

    - how can I have fb and twitter logos and search box next to contact tab (or at least the fb and twitter logo and the search box far right on the 2nd line)

    - is there a way to change the size of the title letters? (bio, works, etc)

  4. If you change the original CSS I gave you to this instead it will move the social icons next to your menu but it doesn't look like there's space to put the search bar there as well:

    #header-left{
      width:510px;
      padding-right:0;
      margin-bottom:20px
    }
    
    .menu li{
      display:inline-block;
      padding-right:20px
    }
    
    .menu li li{
      display:inherit
    }
    
    .menu ul ul{
      left:0;
      top:20px
    }
    
    #header-right{
      float:left
    }
    
    #header-center {
      width:80px
    }
  5. many thanks

    3 questions

    1) Why does it ''cut'' the fb and twitter logo?
    2) How can I move the search box to the right (keep the same line as now) and how I can make it disappear?
    3) Is there a way to increase the size of the titles letters and only those? (I am talking about the horizontal line we just moved)

  6. This code should fix the cut-off social link images:

    #menu-social a {
      width:20px;
    }
    
    #menu-social li {
      padding-right:5px;
    }

    As I mentioned before there isn't enough space to move the search bar to the right of the social links, do you want to remove the search box entirely?

    You can make the navigation menu text larger like this:

    #header-left {
      font-size:1.2em;
    }

    but you will also need to adjust the #header-left width to something like 600px (the second line of the code I gave you before).

  7. Now I am thinking on it, I prefer no to have it, so how can I make the search box get disappeared?

    What about the colour, font type etc of the navigation menu?

    many thanks for your help!!!

  8. No problem, here's how to hide the search bar (although you might want to include one somewhere on your site because it's really useful for readers who get lost or have something specific to track down), change the text and, as a bonus, swap the link hover colour too:

    #header-right {
      display:none;
    }
    
    #header-left a {
      font-family:times;
      color:#f00;
    }
    
    #header-left a:hover {
      color:#0f0;
    }
  9. many many many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic