Jump to content

How To move Menu Down


Recommended Posts

Hello

Requires little help, as i have added navigation bar on the top of the page. Only facing the problem is how to drag/move menu to down size position. Trying my best but its not working. Attaching picture as well. Guide me plz...
thanks

Masam

11951_2LLt6qGcGGVvRNap14Lp_t

Link to comment
Share on other sites

Using CSS rules, you can define the property of the element you have your navigation in. For example, if you create a container called "navigation" (of course either using a Class or an ID) you can define or modify the property of that container. So if you want to re-position that navigation container, if that is the only thing in that area then, you can add a margin-top: 20px; (depending on the value that fit your need) then that container will move down 20px from the top.

Examine the HTML element and see the property of it in the CSS.

Link to comment
Share on other sites

Hello

Thanks for your reply. I have did the same thing which you have told me but same error. I m attaching CSS file lets have a look and little code of header.tpl relates to navigation bar. Will it be the issue of image, as image is 650*75.

(HEADER. TPL code)


{$HOOK_NAV_BAR}


check CSS files as attachment.


Masam

chromestyle.zip

Link to comment
Share on other sites

Masam, I got your chromestyle.css and it seems like from your recent post you change the name of the class .dropmenudiv to .navigation and change some property of it. Now looking at that changes it should work, but then, I don't see your html element structure where the class .navigation is being place. And since you are using an absolute positioning on this element, you need to make sure that the parent container is set to relative positioning and see if that work.

If you can show me the html structure where this class is in or a view of your prestashop site, I can figure it out for you.

Link to comment
Share on other sites

Hi

Sorry for late reply. Thanks, basically i have changed css style sheet using different code. I m attaching my theme in a zip format as it contains all the files. Might be it will helpful for you. By the way i m normally makes change in global.css and header.tpl file. Seriously I m totally stuck, need light in a tunnel.

1) Theme files.
2) Menu JPG image ( want to use as a back ground)

Thanks for helping.

Masam

menu.zip

Link to comment
Share on other sites

Ok, I understand you modify the header.tpl, and added a hook for NAV BAR, but where is the module for that hook, by default Prestashop theme does not have NAV BAR hooks, and from what I know each hooks is acting as a module holder meaning it is associate with a php file in the module folder.

Most problem with

positioning is base on what you have on the CSS property. If you are using Firefox, you can use an Ad-on plugin called firebug so that way you have an idea where that problem is, and then make your adjustment.
Link to comment
Share on other sites

Hi
Well seriously only this thing left in my website otherwise everything is completed. But I have hosted my website, and looking to add this navigation bar as i have properly setted. Attached navigation bar hook which is called Categories bar, please have a look thanks. I have created lots of files keep changing my code for this navigation bar - so i m little sorry.

Masam

categoriesbar.zip

Link to comment
Share on other sites

Masam,
Ok, got the categories bar module, now back to your original problem.
1. The size of image background you are using is 736px x 72px. You need to apply that to the css file (chromestyle.css)
The div container is "chromestyle" here is my changes:
.chromestyle{
font-weight: bold;
font-size: 10px;
background: url(chromebg.gif) center center no-repeat;
height: 50px; /*I ADDED A HEIGHT TO ACCOMODATE THE BACKGROUND IMAGE*/
padding-top:22px; /*I ADDED PADDING-TOP TO MOVE THE MENU DOWN SO IT APPEAR INSIDE OF THE BACKGROUND IMG*/
}

2. Now the menu itself is seating inside of the div and it using a UL list your CSS read .chromestyle ul meaning, for any UL seating inside of the div chromestyle use this style. I disable the background property since I put in the parent container (chromestyle)

.chromestyle ul{
border: 1px solid #BBB;
/*background: url(chromebg.gif) center center no-repeat;*/ /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
}

I hope this make sense, I tested on my local server and it is working.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...