Sub menu Items align Help please!

Website Building
#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.

1 Like
#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

2 Likes
#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;}
1 Like
#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

ant
ant.PNG858×96 34.6 KB

#13

Like this?

image
image.png1366×768 303 KB

1 Like
#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!

1 Like
#16

Hi agian!
may be you know if there is any solution for the below?
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 (of submenu align) using the UI with EasyWebsiteBuilder? I can see (see attachment) only the aligment property for the main menu, not the sub items

ant1
ant1.JPG1643×708 121 KB

thank you
Olga

#17

@sulliops can you check this?

#18

Unfortunately no, that feature cannot do what you’re asking. And when you publish, it overwrites all changes that you make yourself. If you’re looking to do exactly that, you’ll need to copy and paste the changes somewhere, then add them whenever you publish.

1 Like