Sub menu text align and font

Hi,

my submenus are aligned to the left and i need them to be aligned to the right how can i do this?
Also I changed the font and all was ok except sub menu did not change!!

http://imgh.us/Screenshot_17_4.png

Thanks in advance

Hello there,

To change the sub menu direction to right, add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.



#mainnav .sub-menu {
  left: 0 !important;
}

#mainnav .sub-menu .sub-menu {
  left: 100% !important;  
}
  

To customize the sub menu font, use this CSS code:


.mainnav .sub-menu li a {
  font-family: Arial,sans-serif;  
}  

Regards,
Kharis

Hi Kharis,

I appreciate your answer but this is not what i mean, As you might know Arabic language wrote from right to left and I meant the writing direction, I just want to central the sub-menu word not ltr.

http://imgh.us/Screenshot_17_4_1.jpg

Hello there,

Sorry, I didn’t get your point correctly. Please use this CSS code:


#mainnav .sub-menu li a {
  text-align: right;
}

Regards,
Kharis

Thanks Kharis, Its working perfect on laptop but on mobiles its still aligned left

http://imgh.us/18009178_275887302862478_2043531817_n.jpg

Also the font didn’t change in sub-menu list, My font is
font-family: ‘Cairo’, sans-serif;

I really appreciate your support

Hello there,

Please add this CSS code:


@media only screen and (max-width:1024px) {

  #mainnav-mobi .btn-submenu {
    right: auto;
    left: 20px;
  }
  
  #mainnav-mobi ul li a {
    text-align: right;  
  }  
  
} 

Regards,
Kharis

Thanks Kharis, You are Sydney theme guard.

Hi, i tried the code to change my submenu font but is not working:

.mainnav .sub-menu li a {
font-family: Poiret One,cursive;
}

Hello there,

You have to include the Poiret One font to your site before you define that CSS code. There are some ways to do so including this. But since you’re working with Sydney theme, here is the easiest way:

  1. Log into your site admin area
  2. Navigate to Appearance > Customize > Fonts
  3. Under the Body Fonts section, replace the default Google font sets

Source+Sans+Pro:400,400italic,600

with:


Source+Sans+Pro:400,400italic,600|Poiret+One

  1. Now you can call font-family: Poiret One,cursive; in your custom CSS code.

Regards,
Kharis

Sorry, but it didn’t worked:
www.terapiaansiedad.xyz

Hello there,

Please try to add an !important argument.


#mainnav ul ul a {
  font-family: 'Poiret One', cursive !important;
}

Regards,
Kharis

Still not working… :frowning:

Please verify whether the group of you CSS code in error free. The easiest way to check is to use this tool.

Regards,
Kharis