Hey there,
As the title suggests, I have a minor issue where the menu is cut off when the screen is at a certain width. (refer to image 1 for reference).
Have tried to attempt this, however is unsuccessful at this.
I have tried an alternative method, where the logo will be decreased in size when it comes to that ‘certain width’. Have indicated the methods where possible (indicated in image provided)
Please advice on this.
Website Url: http://leapdsc.com/leapdsc/client/hdb/
Image link: https://1drv.ms/i/s!Ai3uwVtbSehuuKpQxDEcvKTsbSak1A
Hi,
There are option in the theme panel to stretch the header elements, just for this thing so the menu items do not fall on a second line
– https://www.screencast.com/t/m76yCM7vz
You could try experimenting with these settings. Also this code is affecting the header container
– https://www.screencast.com/t/m76yCM7vz
Without that code affecting the header it would look like this
– https://www.screencast.com/t/QQd2mfLEN
Thanks
Hi there,
Thank you for the prompt reply. However, the method suggested is not ideal for me. As what I am looking for would be to maintain the width of the menu sharing the same as the content’s width. Thus said, I am hoping to achieve either of the 2 alternatives:
Alternative 1 based on image: Logo will decrease size when it reaches that specific screen width, to compromise the menu space.
Alternative 2 based on image: 2nd line of main menu (cut-off) to be aligned with the 1st line on the menu.
I have tried coding it in css but is unsuccessful. Kindly find the reference below for the idea I am looking to achieve.
Website Url: http://leapdsc.com/leapdsc/client/hdb/
Image website link: https://1drv.ms/i/s!Ai3uwVtbSehuuKpQxDEcvKTsbSak1A
CSS coding attempt: https://1drv.ms/i/s!Ai3uwVtbSehuuKwYPOUorYsGV2TMvA
Feel free to correct me if need to be, and advise me accordingly. Thank you
Hi,
What I meant was that there is a custom code that affects all the containers in general
– https://www.screencast.com/t/MJTBlDShMdI3
If that code is required in your customization, you can create a condition to override it between the widths that are causing the menu item to drop down on a second line. Something like this, without code
– https://www.screencast.com/t/o7T0W8of
And after added code
– https://www.screencast.com/t/zKkNRUwV
@media (max-width: 1251px) and (min-width: 1140px) {
.td-header-menu-wrap .td-container {
width: 1068px;
}}
Thanks
Hey there,
I have tried the code and it works wonderfully!
Appreciate for the support so far. Thank you
