Home Forums Porto Template Customizing dropmenu items

  • This topic has 19 replies, 2 voices, and was last updated 1 month ago by Support2. This post has been viewed 200 times
Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #10031432
    ppericles
    Participant

    Hello,
    How can I change the width of each dropmenu item?
    How can I add an image before the dropmenu item text?

    Thanks,
    Pericles



    Template Version: 7.6
    #10031436
    Support2
    Keymaster

    Hello Pericles,

    1) Here’s the code you need:
    (css/custom.css):

    @media (min-width: 992px) {
        /* First level of dropdown menu */
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover > .dropdown-menu {
            min-width: 300px;
        }
        
        /* Second and forward level of dropdown menu */
        #header .header-nav-main-sub-effect-1 nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu {
            min-width: 300px;
        }
    }

    2) Here’s the code you need:
    (css/custom.css):

    @media (min-width: 992px) {
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover > .dropdown-menu li a,
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover .dropdown-mega-sub-nav li a {
            padding-left: 30px
        }
    
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover > .dropdown-menu li a:before,
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover .dropdown-mega-sub-nav li a:before {
            content: '';
            position: absolute;
            background: url(http://preview.oklerthemes.com/porto/7.5.0/img/logo-default.png);
            background-size: cover;
            width: 15px;
            height: 20px;
            left: 10px;
            top: 10px;
        }
    }

    * Note that the width and height should match with the image size.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031437
    ppericles
    Participant

    Thanks for the quick reply.
    For 2) I meant a small image to the left of the menu text. For example an image of a flag and the language name as the text.

    Thanks.


    #10031438
    ppericles
    Participant

    Also, your solution for 1) did not work.
    I want to reduce the width of each item in the dropdown menu.

    Thanks.


    #10031440
    Support2
    Keymaster

    Hello,

    1) To reduce the width you can decrease the value of width. For example:

    @media (min-width: 992px) {
        /* First level of dropdown menu */
        #header .header-nav-main-effect-1 nav > ul > li.dropdown:hover > .dropdown-menu {
            min-width: 100px;
        }
        
        /* Second and forward level of dropdown menu */
        #header .header-nav-main-sub-effect-1 nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu {
            min-width: 100px;
        }
    }

    * Note that if you have a big text inside the submenu (more than 100px), then width will be based on the width of text.

    2) We did a new test with the previous solution and it’s working like you want. Maybe you need clear your browser cache to see the changes.

    Another way and probably more easy (didn’t think yesterday) is the code below:

    ...
    ....
    ......
    <ul class="dropdown-menu">
    	<li class="dropdown-submenu">
    		<a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-us" alt="English" /> Headers</a>
    ......
    ...
    ..

    * Note the image for the flag.
    * Porto comes with ready classes for flags. For example flag-es will show Spanish.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031442
    ppericles
    Participant

    Hello.
    1) Still does not work.
    Here is a picture of what happens: https://www.dropbox.com/s/fq82q5rkh51fniu/Annotation%202019-12-05%20145622.jpg?dl=0
    2) Thanks.


    #10031445
    ppericles
    Participant

    Here is my code for the submenu

    <li class="dropdown">
    														<a href="#">
    															<i class="fad fa-globe text-lg-5"></i>
    															English
    														</a>
    														<ul class="dropdown-menu">
    															<li class="dropdown-submenu">
    																<a href="gr-index.html"><img src="img/blank.gif" alt="English" /> GREEK</a>
    															</li>
    														</ul>
    													</li>

    • This reply was modified 1 month, 1 week ago by Support2.
    #10031449
    Support2
    Keymaster

    Hello Pericles,

    Thanks for the code.

    Sorry I sent the code with wrong classname for you before.

    Please try with this new:

    @media (min-width: 992px) {
        /* First level of dropdown menu */
        #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu {
            min-width: 100px;
        }
        
        /* Second and forward level of dropdown menu */
        #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu {
            min-width: 100px;
        }
    }

    * Note the header-nav-main class.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031451
    ppericles
    Participant

    Hello.
    It worked like a charm!

    Thanks


    #10031536
    ppericles
    Participant

    Hello,
    I still have a problem when the window size is reduced (from mobile devices). Please see https://www.dropbox.com/s/umk5vlp5fz0dogu/Annotation%202019-12-10%20161758.jpg?dl=0

    Can you help?

    Thanks.
    Pericles


    #10031538
    Support2
    Keymaster

    Hello Pericles,

    The only way to solve this issue is reduce the size of menu items text and icon on this resolution.

    For example:

    @media (min-width: 992px) and (max-width: 1199px) {
        // code to reduce the items size goes here
    }

    * If you need help on the CSS code to reduce the size, please share the link of website with us. So we can inspect your code and send for you the code.

    Kind Regards,

    Rodrigo.


    #10031540
    ppericles
    Participant

    Hello,
    Thanks for your reply.
    Please give some help with the ccs code to reduce the size. Sample url https://www.ims.gr/IMSWEB7/index.html

    Thanks,
    Pericles


    #10031543
    Support2
    Keymaster

    Hello Pericles,

    Thanks for the link.

    Please try with this code:

    @media (min-width: 992px) and (max-width: 1199px) {
    	#header .header-nav-main nav > ul > li > a {
    		font-size: 0.7rem;
    	}
    }

    Kind Regards,

    Rodrigo.


    #10031544
    ppericles
    Participant

    Sorry, this did not work.
    No change on behavior.


    #10031545
    Support2
    Keymaster

    Hello,

    I did a new test and it’s working:

    Try to clear your browser cache. Probably this is the issue.

    Kind Regards,

    Rodrigo.


    #10031546
    ppericles
    Participant

    Hi.
    You are absolutely right! It works!

    Thanks,
    Pericles


    #10031586
    ppericles
    Participant

    Hello,
    I just noticed that the dropdown menu is not working on small screen sizes.

    Thanks,
    Pericles


    #10031591
    Support2
    Keymaster

    Hello Pericles,

    If you mean the language dropdown here’s the code you need:

    <a class="dropdown-item dropdown-toggle d-lg-flex flex-lg-column align-items-lg-center justify-content-lg-center" href="#">

    * It’s missing the class drodown-toggle.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031605
    ppericles
    Participant

    Hi it now works better.
    But, when the submenu is displayed a downward looking arrow is obscuring the text of the menu item.

    Regards,
    Pericles


    #10031607
    Support2
    Keymaster

    Hello Pericles,

    Remove the class dropdown-submenu:

    From this:

    <li class="dropdown">
    	<a class="dropdown-item dropdown-toggle d-lg-flex flex-lg-column align-items-lg-center justify-content-lg-center" href="#">
    		<i class="fad fa-globe"></i>
    		EN
    	</a>
    	<ul class="dropdown-menu">
    		<li class="dropdown-submenu">
    			<a href="gr-index.html"><img src="img/blank.gif" class="flag flag-gr" alt="English"/> GREEK</a>
    		</li>
    	</ul>
    </li>

    To this:

    <li class="dropdown">
    	<a class="dropdown-item dropdown-toggle d-lg-flex flex-lg-column align-items-lg-center justify-content-lg-center" href="#">
    		<i class="fad fa-globe text-5"></i>
    		English
    	</a>
    	<ul class="dropdown-menu">
    		<li>
    			<a class="dropdown-item" href="gr-index.html"><img src="img/blank.gif" class="flag flag-gr" alt="English"/> GREEK</a>
    		</li>
    	</ul>
    </li>

    Kind Regards,

    Rodrigo.


Viewing 20 posts - 1 through 20 (of 20 total)