Centering The Items On The Menu Bar?

Store Builder Questions
1

Hello



I want to center all the items in my horizontal navigation bar. Right now, they start from left to right and that makes the symmetry of the website a bit unpleasant. I cannot find any settings within CS-Cart itself which would allow me to do that. I appreciate your comments.



Thanks

2

Hi there Rajinder



You need to set following css




.top-menu-grid {<br />
	background: none repeat scroll 0 0 #34495e;<br />
	margin-top: 38px;<br />
	padding-top:0;<br />
}<br />
.top-menu {<br />
	display: table;<br />
	margin: 0 auto;<br />
}<br />
.ty-menu__item {<br />
	display: inline !important;<br />
}
```<br />
<br />
The first rule .top-menu-grid should have the  same background color as the .ty-menu__items (in this case was the #34495e)<br />
<br />
Let me know the results<br />
<br />
<br />
![](upload://6I6PuuEmauXO02up6hgyYXrei26.jpeg)<br />
<br />
Fotis
3

Thanks for this, I've just added this and now have the word MENU at the front of the first category. Do know how I remove that please?

4

Hi



I think you have a wrapper to the block you have set menu. Just remove it from the block settings. Set this to -



Fotis

5

Not got to grip with this yet, where exactly would I add that code ? in a file or use the visual editor cus thats what I did last time. I checked the block it doesn't have a wrapper.

6

The css you can add in the visual editor, in the Custom Css field in your active theme.

7

Thats what I did , I've include an image

Untitled.jpg

8

ok



got it. Just remove the last rule



.ty-menu__item {
display: inline !important;
}




Fotis

9

Thats got it, only I’ve lost the rounded corners :-) sorry working you hard - it is appreciated.

10

Just add





.top-menu-grid {


border-radius: 5px;
}





Fotis

11

Thanks Fotis.

12

Thank you Fotis! The code worked perfectly. I have two additional questions for you though.[list=1]

[]If you look at the menu on my website (www.sparkpcb.com), there's a weird little cutoff at the end of the menu. It looks like as if a tab is hidden, but not quite there. Is there any way to fix this?

[]When you have the responsive layout resized to the mobile version, and if you look at the centered menu, the arrows that open up sub-categories overlap the text, making it uncomfortable to read. How do I fix this?

[/list]

Your help is appreciated!

13

Hi Rajinder Dhiman



what you see on #1 point is your right boder that sticks out as you have set border radius and the menu is shorter at the end .



You could use this css to fix it.



.ty-menu__item:last-child {
border-right: 0 none;
}




As for #2 use this ccs under the @media (max-width: 767px)





.ty-menu__item .ty-menu__item-link {
min-width: 190px !important;
}











Let me know Fotis

14

That definitely helped! Thank you so much!

15

Hi there Rajinder

You need to set following css

.top-menu-grid {
	background: none repeat scroll 0 0 #34495e;
	margin-top: 38px;
	padding-top:0;
}
.top-menu {
	display: table;
	margin: 0 auto;
}
.ty-menu__item {
	display: inline !important;
}
The first rule .top-menu-grid should have the same background color as the .ty-menu__items (in this case was the #34495e)

Let me know the results


ilauy1.jpg

Fotis

Thanks for trying to help. I did the same thing but mine didn't work. It is still on the same position. Please help me.