View Replies (12)

Resolved Right-Menu Styling

  1. Issue
  1. Ensure
  2. Thursday, 16 July 2020
Hello there,

I wanted to run a menu on right-menu position in Ensure instead of default SP Page Builder module.

When I try, I see that on right-menu position styling is not harmonious with main menu. Font size is a bit bigger; there is a dot on menu item and position is not alligned to the right side and in the middle.

Could you provide a solution?

Thanks.
Accepted Answer
You not need any suggested above code. Just paste this class sp-megamenu-parent into the menu module.
1.jpg
For alignment use these code variants:


.menu.sp-megamenu-parent {

	float: left;

}





.menu.sp-megamenu-parent {

	float: right;

}





.menu.sp-megamenu-parent {

	float: none;

	text-align: center;

}

Exemple

2.jpg
Attachments (2)
1.jpg 1.jpg
2.jpg 2.jpg
  1. more than a month ago
  2. Ensure
  3. # Permalink
Responses (12)
Hi,
Use this custom css


li.item-1801 {

    list-style-type: none;

    position:relative;

    top:8px;

}

.sp-module ul > li > a {

    font-size: 14px;

  

}

Add this css code inside the custom.css file.
Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
Thanks
  1. more than a month ago
  2. Ensure
  3. # 1
Hi Mehtaz,
Thank you very much. It is now very close what I want.
There is just one thing left: How to align menu items to right?
  1. more than a month ago
  2. Ensure
  3. # 2
Hi,
Its already aligned
https://prnt.sc/tjfsmi
  1. more than a month ago
  2. Ensure
  3. # 3
Hi Mehtaz,
I mean that this menu row is padded 60px from left and 60px from right.
To make the view symmetrical with logo, menu-right items should start from the far right. (starting from far right to left).
Am I clear now?
  1. more than a month ago
  2. Ensure
  3. # 4
Provided code doesn't work well. Please see how it looks when I have added a new item to the menu. It is a usual menu position and I can't use it :(
  1. more than a month ago
  2. Ensure
  3. # 5
Hi,
Use this code




.menu li{

    list-style-type: none;

  

}

Now you can add as much as you want. Please insert one more item and let me know its alright or not. Please check the dot style first
  1. more than a month ago
  2. Ensure
  3. # 6
Hi,
I have added the code. Dot style has dissappeared, but menu still vertical while it should be horizontal.
Menu items should also start from the far right, instead of in the middle or from left.
I want to use this position as a user menu. Unfortunately currently it looks a bit mess.
  1. more than a month ago
  2. Ensure
  3. # 7
I think you can set it again like the menu and use that css code which I provide. First keep a backup and then set it again
  1. more than a month ago
  2. Ensure
  3. # 8
I have set up again. Running css code is the one you provided latest. It is still list style. :(
  1. more than a month ago
  2. Ensure
  3. # 9
Thank you very much, Pavel. Well done.
  1. more than a month ago
  2. Ensure
  3. # 10
You are wellcome
  1. more than a month ago
  2. Ensure
  3. # 11


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.