Menu Left-Justified, with Title on Top

(11 posts) (4 voices)

1. 

   flashden422
   Member

   Great new theme! I've always liked InFocus and this has similar characteristics.

   Is there a way to move the menu all the way over to the left so that it starts on the left side of the page and then move the logo up above it? Basically making the menu left-justified instead of right-justfied?

   This would allow for more top-level menu options and give the menu a little bit more of a prominent place at the top of the site. It would also open up more height and width options for logos since they would have more room to move over towards the right without having to worry about bumping into menu items.

   Thank you.

   Posted 9 months ago #
2. 

   Elliott
   Support

   Hello flashden422,

   You can control the logo and menu positioning with these lines,

   .logo { position: absolute; top: 0px; left: 0px; }
   #primary_menu { position: absolute; top: 0px; left: 0px; }

   If you need to make the header bigger then you would do this,

   #header { height: 150px; }

   You can place these lines in Dashboard -> Method -> General Settings -> Custom CSS to use them.

   Posted 9 months ago #
3. 

   flashden422
   Member

   Thank you. That worked well. I'll post more later on a few other adjustments that I made, but I do have one more question on this first. Is it possible to make more adjustments to the code somewhere to bring over the far left edge of the word to the left 15 pixels, as that would allow it to line up to everything else on the left-most edges (i.e. the logo, the images in the rotator, text below, etc).

   I've attached a screen capture so you can see how it's currently aligning and what I'm referring to.

   Thank you.

   

   Attachments

   1. Left-Justified-Menu.jpg (8.6 KB, 1 downloads) 9 months old

   Posted 9 months ago #
4. 

   Ruderic
   Support

   Hello,

   You can assign a negative "left" value to the menu CSS tweak, this way:

   #primary_menu { left: -15px; }

   That will move the menu further to the left.

   Posted 9 months ago #
5. 

   flashden422
   Member

   Thanks Ruderic!

   Posted 9 months ago #
6. 

   dubpluris
   Member

   I am trying to move the menu over to the left using this method but can't get it to move. I can get it to move up and down, but not left to right. Here is the code on my custom CSS box:

   #primary_menu { position: absolute; top: 10px; left: 0px; }

   #header { height:95px !important; }

   .logo { position: absolute; top: 14px; left: 10px; }

   Thanks!

   Posted 6 months ago #
7. 

   Elliott
   Support

   Hello dubpluris,

   Try adding a !important to the end like so,

   #primary_menu { position: absolute; top: 10px; left: 0px !important; }

   If your still having trouble then send us a link to your page and we'll take a closer look.

   Posted 6 months ago #
8. 

   dubpluris
   Member

   Still not working. The site is ctcpc.org. Thanks

   Posted 6 months ago #
9. 

   Elliott
   Support

   Try switching it to this instead,

   #primary_menu { position: absolute; top: 10px; right: 100px !important; }

   And then play around with the right value until it looks okay.

   Posted 6 months ago #
10. 

    dubpluris
    Member

    That did it! Can I ask, what does the addition of the !important accomplish?

    Posted 6 months ago #
11. 

    Elliott
    Support

    Sometimes you'll get some CSS conflicts which are two statements changing the same thing. You can use the !important to override them to make sure your CSS takes priority.

    It's probably not needed in this case but if it's in your custom CSS section where you can easily find it again then it doesn't hurt to use it.

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.