Sub menu Items align Help please!


#1

Hello to everyone,
I’ve created a menu bar on the top of the page and it is right-aligned. How can I set the different (left) alignment for the SUB items of this menu?
my menu looks like this:
MainMenuItem
subitem1
subitem2
subitem3

and I need like below:

MainMenuItem
-subitem1
-subItem2
-sunitem3
The problem is when I set the main menu align to left, everything goes left and the opposite. I want to set main menu to the right and the submenu items -to the left. Is it possible?
It looks so ugly now! HELP!

thank you!


#2

I’m not one to work for this kind of thing, as I have very little experience with making responsive websites, but I recommend trying to do float:right in your style sheet perhaps instead of your current setup

Basically
.hmenu {
float:right
}
and remove your text align
I have very little style sheet experience, but this should work.


#3

This : image
Is interfering with your menu bar. Try to remove it.


#4

Oh thank you so much for the reply!
I didn’t knew I can edit css files!!
/public_html/zyro/css/9.css
So you mean the 9.css file is the one for the navigation bar? I tried to remove line 16 but it comes back again so I’ve set text align to left. But I still can not see any changes
#wb_element_instance0, #wb_element_instance0 ul { text-align: left; }

(there are a lot of css files on this directory, should I change also any other?)


#6

#wb_element_instance0, #wb_element_instance0 ul { text-align: right; }
#wb_element_instance0, #wb_element_instance0 li { text-align: left; }


#7

Maybe you should try to refresh the page without cache with CTRL + F5


#8

yes, I did it, but nothing changed. sure I have to edit only this particular css file?

thank you for helping!!!


#9

here is the css
actually I just noticed that after saving the file if I press “publish” on Website Boulder it resets the value to the old one

#wb_header { height: 145px; }
#wb_header > .wb_cont_bg { background: transparent url("…/gallery_gen/467843efec824e02f3ecc4a78644e870.gif") repeat scroll left top; }
#wb_main { height: 313px; padding-bottom: 30px; }
#wb_main > .wb_cont_bg { background: #ffffff none repeat scroll left top; }
#wb_footer { height: 35px; }
#wb_footer > .wb_cont_bg { background: #fa5300 none repeat left top; background-size: auto auto; }
body { background: #f5a870 none repeat-x scroll center top; }
.wb_sbg { background: transparent none no-repeat scroll center top; }
body, .wb_sbg { min-width: 992px; min-height: 493px; }
.wb_cont_inner { width: 992px; }
.wb_cont_bg { width: 992px; margin-left: -496px; }
.root { height: 463px; overflow: visible; min-height: 493px; }
#wb_element_instance0 { top: 0px; left: 0px; min-width: 990px; width: 990px; min-height: 36px; height: 36px; display: block; z-index: 809; }
#wb_element_instance0 ul { background: #f5a870 none repeat right top; border: 1px solid #919191; }
#wb_element_instance0, #wb_element_instance0 ul { text-align: left; }
#wb_element_instance0 ul ul { background: #fa5300 none repeat right top; }
#wb_element_instance0 li { margin: 0px 0px 0px 0px; }
#wb_element_instance0 li a { text-transform: capitalize; border: 0px solid #9e9e9e; padding: 10px 10px 10px 10px; font: normal bold 12px Tahoma,Geneva,sans-serif; text-decoration: none; color: #572a15; line-height: 14px; background: #f5a870 none no-repeat center top; }
#wb_element_instance0 li.over > a, #wb_element_instance0 li:focus > a { border: 1px none #8f8f8f; font: normal bold 12px Tahoma,Geneva,sans-serif; text-decoration: none; color: #ffffff; line-height: 14px; background: #fa5300 none no-repeat center top; }
#wb_element_instance0 li.active > a { border: 0px solid #8f8f8f; font: normal bold 12px Tahoma,Geneva,sans-serif; text-decoration: none; color: #ffffff; line-height: 14px; background: #f5a870 none no-repeat center center; }
#wb_element_instance0:not(.collapse-expanded) .vmenu ul.open-left,#wb_element_instance0:not(.collapse-expanded) .hmenu ul.open-left { left: auto; right: 100%; }
#wb_element_instance0:not(.collapse-expanded) .hmenu > li > ul.open-left { left: auto; right: 0; }
#wb_element_instance1 { top: 36px; left: 82px; min-width: 350px; width: 350px; min-height: 46px; height: 46px; display: block; z-index: 797; }
#wb_element_instance2 { top: 21px; left: 22px; min-width: 58px; width: 58px; min-height: 75px; height: 75px; display: block; z-index: 796; overflow: hidden; }
#wb_element_instance2 img { width: 57px; height: 75px; display: block; position: relative; left: 0px; top: 0px; max-width: inherit; }
#wb_element_instance3 { top: 101px; left: 22px; min-width: 490px; width: 490px; min-height: 24px; height: 24px; display: block; z-index: 798; }
#wb_element_instance4 { top: 72px; left: 80px; min-width: 220px; width: 220px; min-height: 28px; height: 28px; display: block; z-index: 801; }
#wb_element_instance5 { top: 0px; left: 714px; min-width: 277px; width: 277px; min-height: 143px; height: 143px; display: block; z-index: 674; }
#wb_element_instance5 img { width: 277px; height: 143px; display: block; position: static; left: 0px; top: 0px; }
#wb_element_instance6 { top: 7px; left: 10px; min-width: 210px; width: 210px; min-height: 24px; height: 24px; display: block; z-index: 785; }
#wb_element_instance7 { top: 3px; left: 961px; min-width: 30px; width: 30px; min-height: 30px; height: 30px; display: block; z-index: 777; }
#wb_element_instance7 img { width: 30px; height: 30px; display: block; position: static; left: 0px; top: 0px; }
#wb_element_instance8 { top: 50px; left: 22px; min-width: 300px; width: 300px; min-height: 28px; height: 28px; display: block; z-index: 156; }
#wb_element_instance9 { top: 85px; left: 22px; min-width: 950px; width: 950px; min-height: 168px; height: 168px; display: block; z-index: 453; }
#wb_element_instance10 { top: 273px; left: 0px; display: block; z-index: 9000; }
#wb_element_instance11 { top: 53px; left: 0px; display: block; z-index: 9999; }

#wb_element_instance1 p:last-child { margin-bottom: 0; }
#wb_element_instance3 p:last-child { margin-bottom: 0; }
#wb_element_instance4 p:last-child { margin-bottom: 0; }
#wb_element_instance6 p:last-child { margin-bottom: 0; }
#wb_element_instance8 p:last-child { margin-bottom: 0; }
#wb_element_instance9 p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
}

@media (min-width: 1200px) {
}


#10

Hello again, I found a css file I have to update for the home page.
When I set the value to LEFT, ALL the menu goes to left and not only the submenu items…
#wb_element_instance0, #wb_element_instance0 ul { text-align: left; }
I tried to separate it
#wb_element_instance0 { text-align: right; }
#wb_element_instance0 ul { text-align: left; } (<–sub menu items?)
whith no success
HELP!!


#11

Don’t worry, We don’t need your css, we can view it on your page :wink:
Text is align left by default. Just delete the following lines :

#wb_element_instance0, #wb_element_instance0 ul {text-align: right;}

#12

Thank you for the replay!
I deleted this line from the 2.css file (the one for the home page)
Everything goes left now, and I want only the submenu left and all the main navigation items- on the right

olga


#13

Like this?


#14

yes!! found it!!! I found the line!!THANK YOU SO MUCH!!

so I have to edit all the css files of my site?
When I edit 2.css (the one for the home page) at file manager, page is displaying properly, but once I publish my site again it resets all the changes made on file manager window. Is there any way to edit this property for the zyro-editing version?
thank you
Olga


#15

Looks like u got it!