Okay
  Public Ticket #1462021
Adjusting space between paragraphs and height of the menu (Bridge92)
Closed

Comments

  • Candy started the conversation

    Hi team,

    I have problems on adjusting the css of these elements

    1.) How can I adjust the size of mobile menu icon (A) and the height of mobile menu (B) https://imgur.com/a/umymA I have tried editing the height in various .mobile_menu_button parameter in style.css but it didn't work.

    2.) There are no height spacing between each of the paragraph which making the whole article look like it is in one paragraph. How can I adjust it? https://imgur.com/a/5TZnH

    Please advise. Thank you.

  • Candy replied

    Usually on normal websites, the text in each paragraph had an obvious space that separated each one from another. 

    I have looked into the line height in Text section (Qode Options > Fonts) but that parameter works only the line height itself, not the paragraph. The only solution I've just found so far is to put non-breaking space code between each paragraph. It looks a lot better but still, I'm curious if there is any ways to adjust the whole space paragraph. 

    Kindly advise me. Thank you

  • Candy replied

    One more thing, where can I change the color of each category tabs? https://imgur.com/a/Wh39h

    Thank you in advance

  •  1,321
    Qode replied

    Hi Candy, 

    1) To adjust the mobile menu icon size, navigate to Qode Options -> Header -> Header Button Icons and use the Icon Size option: 

    https://monosnap.com/file/JNuUID6BNa7mtbVtdOOxA0xqpGo8PG

    2) The paragraphs have margin disabled by default, but you can set desired margin via theme options. 

    Please navigate to Qode Options -> Fonts -> Text -> Paragraph -> Top/Bottom Margin and enter desired value, for example 20: 

    https://monosnap.com/file/iiYimQUvWzuuxHL9U0uluKQFFYjBLP

    When editing text in Text Block, hit Enter on keyboard where you want the text to break. 

    https://monosnap.com/file/kGwVWZsKRKMU0WEaYSmVmD03mrckyA

    The text that follows will be displayed in separate < p > element and, with the margin setting that you have defined, there will be spacing (in this case, 20px) between these two texts on the page: 

    https://monosnap.com/file/GXOx060gFbu8K2V1ys2GQuvTQ4VUAl

    3) You can set desired color for each category under WP admin -> Posts -> Categories -> your category: 

    https://monosnap.com/file/5N2QXURP8m2mC1DwA01NLgBSRGLRmR

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Candy replied

    Thank you Qode. I have followed your instructions and it works for those elements but now, I have other problems. How can I set up the mega menu as shown in http://bridge92.qodeinteractive.com/ 

    I tried to follow the instructions you provided in several tickets but still failed. Please see the screenshots https://imgur.com/a/sSXkJ 

    Please advise. Thank you

  • Candy replied

    More questions apart from mega menu

    1. How can I have sticky menu bar on mobile version?

    2. How can I adjust the gap (padding?) of article post on mobile version?

    Please see the attachment https://imgur.com/a/Q4Uuz

    Thank you Qode

  •  1,321
    Qode replied

    Hi Candy, 

    Sorry for a late reply. 

    1) Regarding the mega menu here http://bridge92.qodeinteractive.com/

    There are Wide Menu 1 and and Menu Video 1 custom widget areas under Appearance -> Widgets with  Qode Layout 1 Widget and Qode Video Layout 2 widget - the screenshot or our widgets is in the attachment. 

    For each first level menu you have to select Type: wide

    https://monosnap.com/file/OiVeLbKUxGXsRmVeBs122J8tFti4RR

    Each (wide) first level menu item has a submenu item with appropriate custom widget area selected: 

    https://monosnap.com/file/U9pqyQGpKBy73FbVDeitqlx6Tv9i3M

    Also, each submenu item has extra class qode-one-column-dropdown

    https://monosnap.com/file/D2F3KHyW8hTYx5g201zvL0mbDmFCXz

    ...and the following CSS is applied in Qode Options -> General -> Custom CSS field: 

    @media only screen and (min-width: 1024px) {
    .drop_down .wide .second ul li.qode-one-column-dropdown {
       width: 950px;
    }
    }
    @media only screen and (min-width: 1200px) {
    .drop_down .wide .second ul li.qode-one-column-dropdown {
       width: 1100px;
    }
    }
    @media only screen and (min-width: 1500px) {
    .qode_grid_1400 .drop_down .wide .second ul li.qode-one-column-dropdown {
        width: 1400px;
    }
    }
    

    2) There is no option to make the header 'sticky' on mobile screens. Maybe it is possible to provide a custom CSS solution - please send us your site URL and we'll see if we can help. 

    3) Regarding the gap of articles - please describe what do you want to achieve in more detail and send us new screenshot. Thank you. 

    Best regards, 

    Qode

    Attached files:  screenshot-bridge92-qodeinteractive-com-wp-admin-widgets.jpg

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Candy replied

    1. For sticky header for mobile, I followed your instruction here https://qode.ticksy.com//ticket/1425332/ and it works but the area of the header happened to be too big. Is there any way to make the height of the sticky header smaller when scrolling (just like the desktop version)?

    2. For the gap of the article, I want to reduce it so that the content area will be wider than it is now

    3. There is no Wide Menu 1 in my widget. I might delete, how can I retrieve it back. 

    Thank you

  •  1,321
    Qode replied

    Hi Candy, 

    1) The mobile header cannot have different height before and after scroll because it was not intended to be displayed after scroll, so there is no special class for the header after scroll that could be used to style it differently. 

    However, we have a custom CSS solution to reduce the mobile header height (before and after scroll): 

    @media only screen and (max-width: 1000px) {
        .logo_wrapper {
            height: 40px !important;
        }
        .mobile_menu_button {
            height: 40px;
        }
        .shopping_cart_inner, .side_menu_button {
            height: 40px!important;
        }
        .q_logo a, .q_logo img {
            height: 40px !important;
        }
    }
    

    You can change the height (40px) according to your preference and  you'll have to adjust these values in CSS for sticky mobile header https://monosnap.com/file/JDP0aua45SRs7EtcWrCrDtCxRNWBjC

    If you need further assistance please provide us with site URL if possible. 

    2) Regarding the gap of the article on mobile devices: 

    https://monosnap.com/file/Q4Sf8uuZegR7lhQGEE0inpuNS3JmrL

    ...unfortunately there is no option to control this space. 

    3) Just create and use custom widget area: 

    https://monosnap.com/file/KXWiaMViaq0LNLrihB8wOhvaApAgAp

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode