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

  • Author
    Posts
  • #2049895

    9thartwave
    Member

    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.

    #2050026

    hallluke
    Member

    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;
    }
    #2050160

    9thartwave
    Member

    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)

    #2050166

    hallluke
    Member

    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
    }
    #2050167

    9thartwave
    Member

    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)

    #2050168

    hallluke
    Member

    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).

    #2050169

    9thartwave
    Member

    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!!!

    #2050170

    hallluke
    Member

    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;
    }
    #2050171

    9thartwave
    Member

    many many many thanks

The topic ‘Is it possible to have the primary menu in horizontal line?’ is closed to new replies.