Page 1 of 1

want to edit my navigation bar menu be likes here

Posted: Wed Aug 10, 2016 9:00 pm
by HusseinGomaa
Hi everybody,

I have opencart v2.2 and I want to edit my navigation bar menu be likes here.
Image

Firstly: Navigation Menu:
1- How to separate between categories like that?
2- How to center the categories words like that?
3- How to change color of the navigation bar?
4- How to do pattern that?

Firstly: Product page:
1- How to change the image with selectio? - because I wanna when select (ex:color) reflect with iamge.
2- How to add note under "add to cart" button in product page?

Thank you.

Re: want to edit my navigation bar menu be likes here

Posted: Wed Aug 10, 2016 9:50 pm
by viethemes
Are you using a custom theme or the default theme? I can make a custom code for that.

Re: want to edit my navigation bar menu be likes here

Posted: Wed Aug 10, 2016 10:43 pm
by HusseinGomaa
Thanks viethemes

I'm using default theme

Thanks

Re: want to edit my navigation bar menu be likes here

Posted: Thu Aug 11, 2016 1:25 am
by sarthakinfotech
hi
for changing the menu bar colour and other thing you may edit
catalog/view/theme/default/stylesheet/stylesheet.css

especially for menu background color and pattern things you may edit line no 194
#menu styles

Re: want to edit my navigation bar menu be likes here

Posted: Thu Aug 11, 2016 6:15 am
by HusseinGomaa
Thanks for your reply

Please tell me how to do that customization.

Thanks

Re: want to edit my navigation bar menu be likes here

Posted: Thu Aug 11, 2016 1:24 pm
by sarthakinfotech
hi
you may change
background-color value

and also may change the pattern image.

you should be familiar with css for that :)

Re: want to edit my navigation bar menu be likes here

Posted: Thu Aug 11, 2016 11:54 pm
by viethemes
To do that you can install my free extension Custom CSS and add below code

Code: Select all

#menu .nav > li:not(:last-child) {
	border-right: 1px solid #ddd;
	padding-left: 10px;
	padding-right: 10px;
}

Re: want to edit my navigation bar menu be likes here

Posted: Sun Dec 18, 2016 2:57 am
by abccorp
I have opencart V2.x and have successfully set up multiple sites. I am setting up a new site now, Freshmo.com. I am not a new user but I can't seem to change the menu bar color. I have edited catalog/view/theme/default/stylesheet/stylesheet.css but see no change.

/* menu */
#menu {
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;

I have changed #229ac8 to other color codes but the color doesn't change. I've cleared the history and cleaned the cache and been patient overnight but I cannot change the menu bar background color.

I have changed the full page background color successfully by editing
catalog/view/theme/default/stylesheet/stylesheet.css, so I can't understand why I am having such difficulties changing colors when I know where the code is that needs to be changed.

I have tried changing #229ac8 to #7AD7AA throughout the whole stylesheet (that's seven different places) and still, there were no changes to page.

I really need some help here but I am not sure where. Please lend a hand.

Re: want to edit my navigation bar menu be likes here

Posted: Mon Feb 06, 2017 6:01 am
by Gobbo
Hi,

I've just updated the menu background, but how where do I update the menu text colour in the stylesheet.css?

Re: want to edit my navigation bar menu be likes here

Posted: Tue Feb 07, 2017 1:45 am
by cyclops12
Gobbo wrote:Hi,

I've just updated the menu background, but how where do I update the menu text colour in the stylesheet.css?
Search for

Code: Select all

#menu .nav > li > a {
	color: #fff;

Re: want to edit my navigation bar menu be likes here

Posted: Tue Feb 07, 2017 1:48 am
by cyclops12
abccorp wrote:I have opencart V2.x and have successfully set up multiple sites. I am setting up a new site now, Freshmo.com. I am not a new user but I can't seem to change the menu bar color. I have edited catalog/view/theme/default/stylesheet/stylesheet.css but see no change.

/* menu */
#menu {
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;

I have changed #229ac8 to other color codes but the color doesn't change. I've cleared the history and cleaned the cache and been patient overnight but I cannot change the menu bar background color.

I have changed the full page background color successfully by editing
catalog/view/theme/default/stylesheet/stylesheet.css, so I can't understand why I am having such difficulties changing colors when I know where the code is that needs to be changed.

I have tried changing #229ac8 to #7AD7AA throughout the whole stylesheet (that's seven different places) and still, there were no changes to page.

I really need some help here but I am not sure where. Please lend a hand.
Is there any caching system on your hosting ?

Re: want to edit my navigation bar menu be likes here

Posted: Tue Feb 07, 2017 2:06 am
by Gobbo
Thanks Cyclops12, works perfectly.

Re: want to edit my navigation bar menu be likes here

Posted: Tue Feb 07, 2017 3:14 am
by cyclops12
Gobbo wrote:Thanks Cyclops12, works perfectly.
Glad to be of help :)

Re: want to edit my navigation bar menu be likes here

Posted: Fri Aug 18, 2017 3:52 am
by robocop1953
So can you share with the rest of us how you were able to solve the problem of trying to change the colour of the navigation menu bar? Thanks.

Re: want to edit my navigation bar menu be likes here

Posted: Tue Sep 19, 2017 12:07 am
by Michiel_M
robocop1953 wrote:
Fri Aug 18, 2017 3:52 am
So can you share with the rest of us how you were able to solve the problem of trying to change the colour of the navigation menu bar? Thanks.
Here's how I do it:
After doing all the changes in the stylesheet, I empty the shops cache.
I go with FTP to the system's cache folder and delete all files EXCEPT index.html.
Refresh your browser and admire the changes in the new styling :)
My cache (OC version 2.3.0.2) is located at system/storage/cache