Need help with upfront and CSS

1: I need the site tagline to be font-size 35 on mobile and tablet

2: I need the homepage section header to be font-size 50px on mobile and tablet (so it doesn't break the mobile view like it is now)

3: I need to remove the top purple header

4: I need to remove 'top menu' and 'main menu' and replace with 'mobile menu' in toggle mode beside my logo

5: the toggle 'burger' to be black and white

Everything else seems to be working for now.

  • Abdul Wajed

    Hi Jonathan,

    I hope you are well today. :slight_smile:

    1: I need the site tagline to be font-size 35 on mobile and tablet
    2: I need the homepage section header to be font-size 50px on mobile and tablet (so it doesn't break the mobile view like it is now)
    3: I need to remove the top purple header

    For above 3 issues use the below custom CSS and it should do the job for you. Adjust the font size according to your need.

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {
    	#upfront-region-sitetagline .upfront-output-plain_text.upfront-plain_txt.h1 h1 {
    	    font-size: 42px;
    	    float: left;
    	    margin-top: 0px;
    	    padding-left: 10px;
    	}
    
    	#upfront-region-corporate .upfront-output-plain_text.upfront-plain_txt.h1 h1 {
    		font-size: 50px;
    	}
    }
    
    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {
    	#upfront-region-sitetagline .upfront-output-object.upfront-output-plain_text.upfront-plain_txt h1 {
    	    font-size: 36px;
    	    float: left;
    	    margin-top: 0px;
    	    padding-left: 10px;
    	}
    	#upfront-region-corporate .upfront-output-plain_text.upfront-plain_txt.h1 h1 {
    		font-size: 50px;
    	}
    }
    
    /* Portrait phones and smaller */
    @media (max-width: 480px) {
    	#upfront-region-sitetagline .upfront-output-plain_text.upfront-plain_txt.mobileheaders h1 {
    	    font-size: 22px;
    	}
    }
    
    @media only screen and (max-width: 569px) {
    	.upfront #upfront-region-container-topmenu > .upfront-region-container-bg {
    	    display: none;
    	}
    }

    4: I need to remove 'top menu' and 'main menu' and replace with 'mobile menu' in toggle mode beside my logo

    Mobile menu is set in the toggle mode now. The menu was not set to become trigger at the mobile and tablet breakpoints. Here you will find a screencast how to do it: https://premium.wpmudev.org/forums/topic/mobile-burger-menu-not-showing#post-1045818

    And below CSS will place it beside the logo.

    button.responsive_nav_toggler {
        float: none;
        position: absolute;
        top: -100px;
        right: -20px;
    }

    5: the toggle 'burger' to be black and white

    Below custom CSS will make the mobile item to black and white.

    div.menu-mobilemenu-container ul#menu-mobilemenu-1.menu li.menu-item a {
        color: white;
    }

    You can add all the custom CSS to Global Theme CSS field or you can also use this free plugin called Simple CSS:

    https://wordpress.org/plugins/simple-custom-css/

    The ultimate goal would be to apply the CSS in an area that if you were to update your theme it would not get overwritten.

    Hope this helps! Please let me know if you need any further assistance. :relaxed:

    Have a nice day.
    Best regards,
    Wajed

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.