Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1370864
    Steve L
    Participant

    Guys,

    I’m having trouble creating 8 horizontal tabs. I’ve added the following CSS and it works on desktop but it renders the tabs small and floated left at 12.5% width in mobile view. Can you help?

    .eighttabs .x-nav-tabs.five-up > li {
        width: 12.5%;
    }
    
    .eighttabs .x-nav-tabs.five-up > li:nth-child(5n) {
        border-right: 0 none;
    }
    
    .eighttabs .x-nav-tabs.five-up > li:nth-child(6n) {
        border-right: 0 none;
    }
    
    .eighttabs .x-nav-tabs.five-up > li:nth-child(7n) {
        border-right: 0 none;
    }
    
    .eighttabs .x-nav-tabs.five-up > li:nth-child(8n) {
        border-right: 0 none;
    }
    #1371051
    Steve L
    Participant

    Ok… I got the 8 tabs to work but they bunch up in mobile view vs. being nicely stacked:

    .x-nav-tabs.eight-up > li {
        width: 12.5%;
    }
    
    .x-nav-tabs.eight-up>li>a{
    font-size:1.5rem;
    }

    See https://www.johnmooreservices.com/sugar-land-plumbing/

    Shortcode is:

    [x_tab_nav type="eight-up"]
    [x_tab_nav_item title="Plumbing" active="true"]
    [x_tab_nav_item title="Air Conditioning" active=""]
    [x_tab_nav_item title="Heating" active=""]
    [x_tab_nav_item title="Electrical" active=""]
    [x_tab_nav_item title="Remodeling" active=""]
    [x_tab_nav_item title="Roof Repair" active=""]
    [x_tab_nav_item title="Pest Control" active=""]
    [x_tab_nav_item title="Lawn Treatment" active=""]
    [/x_tab_nav]
    [x_tabs]
    [x_tab active="true"] [column type="1/4"] [x_gap size="20px" class="x-hide-md x-hide-lg x-hide-xl"]<img class="aligncenter size-full wp-image-4744" src="https://www.johnmooreservices.com/wp-content/uploads/2017/02/Plumbing-Services.png" alt="Plumbing" width="290" height="290" /> 
    [x_button shape="square" size="small" float="none" block="true" href="https://www.johnmooreservices.com/houston-plumbing/" class="blk-btn mbm"]SEE PLUMBING[/x_button][/column]
    [column type="1/2"]
    <h3 class="mts h-responsive-svcs center-mobile">PLUMBING</h3>
    <h4 class="mts mbm w400 h-responsive-tabs center-mobile">Houston Plumbing Repair, Inspection & Installation Services by Licensed Plumbers. </h4>
    <p class="center-mobile">Since 1965, Houston has counted on John Moore Services for expert plumbing service and repair. From leak detection to clogged drains to whole-home re-pipes, the Pros at John Moore provide the full spectrum of plumbing services. Our courteous, licensed and insured technicians are trained to inspect, diagnose, and repair home and commercial plumbing systems. John Moore plumbing service appointments are offered weekdays, evenings, weekends - even holiday hours - to accommodate your needs and schedule.</p>
    
    <ul>
     	<li>Plumbing Repair / Plumbing Inspection</li>
     	<li>Tankless Water Heaters / Traditional Water Heaters</li>
     	<li>Hot Water Heater Repair / Hot Water Heater Installation</li>
     	<li>Whole-House Repipes</li>
     	<li>Rooter Services / Auger Services</li>
     	<li>Drain Cleaning / Sewer Cleaning</li>
     	<li>Hydro Jetting</li>
     	<li>High-Tech Sewer Camera</li>
     	<li>Sewer Replacement</li>
     	<li>Sinks, Tub, Faucets</li>
     	<li>Garbage Disposal Repair / Garbage Disposal Installation</li>
     	<li>Slab Leak Detection / Line Leak Detection</li>
     	<li>Water Softeners / Water Filtration Systems</li>
     	<li>Water Quality Testing</li>
     	<li>Hot Water Heater Repair, Installation, Leaking</li>
     	<li>Gas Line Repair / Gas Line Installation</li>
    </ul>
    [x_gap size="20px"][/column]
    [column type="1/4" last="true"]
    <a class="x-btn mts mbs x-btn center-button" title="Request Service" href="https://www.johnmooreservices.com/service-request/" data-options="thumbnail: ''"><i class="x-icon mvn mln mrs x-icon-caret-right" data-x-icon=""></i>SCHEDULE SERVICE</a> [/column] [/x_tab]
    [x_tab] Your Content2 [/x_tab]
    [x_tab ] Your Content3 [/x_tab]
    [x_tab] Your Content4 [/x_tab]
    [x_tab ] Your Content5 [/x_tab]
    [x_tab ] Your Content6 [/x_tab]
    [x_tab ] Your Content7 [/x_tab]
    [x_tab ] Your Content8 [/x_tab]
    [/x_tabs]
    
    #1371428
    Christopher
    Moderator

    Hi there,

    Please update your code to :

    @media (min-width:767px){
    .x-nav-tabs.eight-up > li {
        width: 12.5%;
    }
    }
    @media (max-width:767px){
    .x-nav-tabs.eight-up > li {
        width: 100%;
    float:none;
    }
    }

    Hope it helps.

    #1371827
    Steve L
    Participant

    Excellent. Thank you.

    #1371829
    Thai
    Moderator

    If you need anything else please let us know.

    #1371942
    Steve L
    Participant

    Thanks guys. See the finished page at https://www.johnmooreservices.com/

    #1372031
    Joao
    Moderator

    Hi Steve,

    Great work!

    Let us know if you need further assistance.

    Thanks

    Joao

  • <script> jQuery(function($){ $("#no-reply-1370864 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>