Sorry for the later response. I cannot guarantee that I fully understand your requirements. If you want the number of lines in the title and excerpt to be the same, the additional text after the title and excerpt will be displayed in a truncated manner using ellipses (…), right? If that’s the case, how many lines do you want the title and excerpt to display, respectively?
ps: Ideally, if you could provide me with the link to your blog page, I can better understand your requirements and provide you with a more accurate solution. Thanks.

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

@media (min-width: 768px){
 .archive-tit,
.arvhive-excerpt { 
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
 }
.archive-tit { 
    -webkit-line-clamp: 4;  /* lines for title */
 }
.arvhive-excerpt {
    -webkit-line-clamp: 7;  /* lines for excerpt */
 }
}

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

Hi,

Yes it works but it’s not aligned perfectly. Speaking about the blog part.

it should be screenshot like this.

Also is it possible to make a menu menu like this. Couldn’t see it in the options but is it possible to be added to the theme?

Regards,

Hi,

1.Yes like this thank you, there is one problem left. Excerpts are still more than 7 lines.

I’ve added the js part and my custom css is as follows:

@media (min-width: 768px){
	
			 .archive-tit,
			 .arvhive-excerpt { 
					font-size: 25px;
					min-height: 130px;
					display: flex;
					align-items: flex-end;
					flex-direction: column;
			 }

			.inn{
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
			}

			.arvhive-excerpt {
					min-height: 160px; 
				 font-size: 17px;
			 }

			 .arvhive-excerpt .inn {
				-webkit-line-clamp: 7;
			 }

			.arvhive-excerpt p {
				margin:0;
			}
		 .archive-tit { 
				font-size: 25px;
				min-height: 130px;
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
		 }
		.inn{
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
		}
		.arvhive-excerpt p {
			margin:0;
		 }
}

So -webkit-line-clamp: 7; is there but it’s not working. I’m not sure if i’ve updated the css wrong way, this is the latest one.

2. Not just the background but more like a menu that opens on hover having a rectangular shape with parts like:Menu

Thank you for your help very much by the way,

Best Regards,

Hi,

I think first question is resolved.

But got a problem with the menu one.

Menu seems this way in :1366×768 resolution.

And yes basically can it look like this: desired menu look

Desired this way because it could have 10 to 20 parts each in a hamburger way and may be a bit long of a text.

Right now it looks like this: menu now

Thank you for your help a lot again,

Regards,

Hi,
To fix ‘Text wrapping issue for the top-level menu’, please try to reduce the spacing of menu item on theme option, or via the custom Css:

body:not(.navi-justified):not(.navi-corner) .navi-header > div > ul > li {
    margin-left: var(--hSpacingHeadNaviItem, 20px);
}

For this sub-menu layout, it cannot be achieved through theme options or simple code. It requires relatively complex customization work, and I’m sorry, it is beyond the support of free services.

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

Please add the Custom CSS:

@media (max-width: 1365px) {
 .responsive-ux .navi-header,.responsive-ux header .hidden-mobile {
     visibility: hidden;
    pointer-events: none; }
.responsive-ux.show-menu-item-mobile .navi-trigger-out,.navi-show:not(.ux-mobile) .navi-trigger-out {
 display:block!important; } 
}
@media (min-width: 1366px) {
  .responsive-ux.show-menu-item-mobile .navi-header, .responsive-ux .menu #navi_wrap ul:not(.sub-menu) {
    display: none; }
}

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook