Vigilance CSS — change height, menu bar

  • Unknown's avatar
    alexpickett · Member ·

    Howdy fellow bloggers,

    I’ve been on this forum for two years now, but always found an answer to my question. So this is my first post (please help!)

    (Background: I have CSS upgrade and my blog is linked by my avatar)

    1. Can I change the height of the custom header? It seems rather narrow to me compared to some other Vigilance users. When I tried to put in my blog sub-head, it pushed everything down a bit so it looks like I have some room to play with…

    2. Is there a way to center the navigation menu bar? If not do you have a work-around idea to make each page name longer (like using elipses?) to push it to the left?

    Any help would be greatly appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    To change the height of the header you’d need to hide the existing image and set the new one using the background-image property all with CSS. The regular header upload will not let you exceed a given size.

    To centre your navigation try the following code:

    #wrapper {overflow:hidden;}
#nav {float:none;}
#nav ul {padding:4px 0 0; margin-bottom:15px;}
#nav ul {float:left; position:relative; left:50%;}
#nav ul li {position:relative; right:50%; margin:0 8px 0;}
#nav ul ul {position:absolute; left:0; width:auto;}
#nav ul ul li {left:0;}
  • Unknown's avatar
    alexpickett · Member ·

    Hey, THANKS! That code did the trick!

    As far as the header, do you I need to find the “background-image” in CSS and then change the pixels to my needs?

  • Unknown's avatar
    alexpickett · Member ·

    Oh and I hate to take advantage of your kindness, but there was one other thing I was curious if customizing CSS can fix:

    In my drop down menu, if the menu item is too long it will put it on two lines (if you look at the blog under “past projects” and “bio” you see “An unemployed life” and “About the Site are divided into 2 lines).

    Is there a way to lengthen this so the text does not break up into 2 lines?

  • Unknown's avatar
    hallluke · Member ·

    To fix the sub menus try replacing the last line of the code I gave you before with:

    #nav ul ul li {left:0; width:12em;}

    The header image can be swapped by using this code. You’ll need to include the full link to the image and set the appropriate height too:

    #title {background-image:url("IMAGE-URL"); height:XXXpx;}

  • Unknown's avatar
    alexpickett · Member ·

    Halluke, you are great. Thanks a lot.

  • Unknown's avatar
    eagrigorev · Member ·

    Can You help me too, please? I have custom css, and all I need – is to move my header a bit left (left to 20px from current position). My theme is vigilance. I try everything, but really can’t understand how to move this header left!

  • Unknown's avatar
    eagrigorev · Member ·

    In addition, I change only this part of code, to change my header image:

    #title {
    background:url(‘URL’);
    height:560px;
    width:960px;
    overflow:hidden;
    font-size:4.6em;
    font-weight:bold;
    line-height:1.3em;
    text-align:center;
    vertical-align:middle;
    padding:0px;
    }

  • Unknown's avatar
    hallluke · Member ·

    Add the line of code below to your custom CSS. For future reference it is always better to start a new thread if your problem does not directly relate to another one on the forum.

    #title {position:relative; left:-20px;}

  • Unknown's avatar
    eagrigorev · Member ·

    Oh, thank You sooo much! You are really helper!

  • The topic ‘Vigilance CSS — change height, menu bar’ is closed to new replies.