This topic contains 13 replies, has 2 voices, and was last updated by  Skandha 6 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #146374

    PositivelyVisual
    Participant

    Hi,

    I love how this theme looks, but not the default color scheme. I would like to change all of that purple and orange. Is there CSS to do this? Also, is there a way to increase the logo size on mobile. It comes out sooo small on my phone.

    http://positivevisdev.com/

    Thanks for any help.

    #146382

    PositivelyVisual
    Participant

    Actually, the only color I seem to need help with now is the menu color that changes to white when scrolling down… that and the logo size on mobile still.

    Thanks for any help.

    #146384

    PositivelyVisual
    Participant

    Also, I was wondering if there is a way to shrink the header area. I have it set so there is no header image, but the header area seems just as large as the default image (a lot of empty space).

    Thanks for any help.

    #146397

    Skandha
    Participant

    @positivelyvisual: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
    To change the color of header when scrolling down

    .fixed-nav #masthead {
    	background-color:#1a1a1a;
    }

    To change the size of logo in mobile view

    @media screen and (max-width:1023px) {
    	.site-branding img {
    	width:125px;
    	}
    }

    To shrink header area

    .header-media-disabled #masthead.main-nav-scrolled {
        height:100px;
    }

    Let me know if this works out.
    Kind Regards,
    Skandha

    #146489

    PositivelyVisual
    Participant

    @skandha: Thanks Skandha! I appreciate your help. I love the new logo size on mobile and I love having control over the header color and size when scrolling down. When I originally mentioned wanting to change the header size, what I mean is the space behind the page titles (is not there on home page). Perhaps this page will clarify:
    http://positivevisdev.com/architecture

    There is sooo much space around the word architecture and I don’t want to put an image there to fill it up.

    Also, I love having the menu header near-black as I scroll down, but then I can’t see the search button, the menu button, or the word ‘MENU’. Is there css code to change these elements to #fff?

    I appreciate all the help you’ve already given (and for a free theme user!).

    Thanks for any additional help you are able to give.

    #146513

    Skandha
    Participant

    @positivelyvisual: To reduce the space around page-title
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .custom-header .entry-container {
    	padding-top:100px;
    	padding-bottom:25px;
    }

    To change color of menu item and search
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    #search-toggle a, .menu-label {
    	color:#fff !important;
    }
    .fixed-nav .menu-toggle .fa, .fixed-nav .menu-close .fa {
    	color:#fff !important;
    	border-color:#fff !important;
    
    }
    
    #search-toggle .fa.fa-search:hover {
    	color:#000 !important;
    }
     
    .menu-toggle .fa.fa-bars:hover {
    	background-color:#000 !important;
    }

    Let me know if this works out.
    Kind Regards,
    Skandha

    #146550

    PositivelyVisual
    Participant

    @skandha: Thank you for the continued support. I love the new spacing around my titles. I like the new control over the menu colors, though there are a couple elements that don’t quite work out…

    On mobile, the close button doesn’t show… the reason seeming is that the x symbol is linked to the menu bar symbol, and changing one seemingly changes the other:
    http://positivevisdev.com/wp-content/uploads/2018/05/Capture_2018-05-25-10-12-31-1.png

    On PC the words Close doesn’t show… the reason seeming is that those words are linked to the words Menu:
    http://positivevisdev.com/wp-content/uploads/2018/05/capturepc.png

    So my guess is, unless there is some CSS to isolate these elements, I may need to find a work around and that a black vs white theme won’t work exactly as planned… so I decided to use the code you gave me and tried out a hue/color that will show against both black and white (green), and it all works nicely except the circle and the menu bars symbol are white when the page is stationary and sitting at the top (not scrolled down at all). None of the code you gave me seems to affect these two elements in this state. If there is no solution to the issues described above I’m wondering if you can please give me the css to change these two elements in this state to green as well:
    http://positivevisdev.com/wp-content/uploads/2018/05/alternative.png

    Also, I seem to have control over the circle hover color when the point is on the circle, but not when the pointer is on the word “Menu”:
    “http://positivevisdev.com/wp-content/uploads/2018/05/alternative.png”

    Other than that, everything seems WONDERFUL. Thank you for your support,
    Joshua

    #146551

    PositivelyVisual
    Participant

    @skandha: Sorry, my last link wasn’t setup properly and wasn’t the correct address. The hover elements:
    http://positivevisdev.com/wp-content/uploads/2018/05/pointerhover.png

    #146598

    PositivelyVisual
    Participant

    @skandha: Hi Skandha. I actually figured out how to change many things myself! Thanks for your help! If I decide to upgrade, purchase a theme, or recommend a theme to anyone Catch Themes is at the top of my list!

    I love how the theme looks on my PC. I love how it looks even more on my android phone.

    I only have one thing left I haven’t figured out. I don’t know how to change what I thought may be
    .menu-toggle .fa.fa-bars, but I didn’t seem to find a state that worked… maybe I missed it?

    Anyways, I would like behind the bars to be #1a1a1a rather than green, which is making a completely green circle at the moment:
    http://positivevisdev.com/wp-content/uploads/2018/05/lastthing.png

    This seems to only happen on PC after clicking.

    #146654

    Skandha
    Participant

    @positivelyvisual: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .menu-close:hover .fa, .menu-close:focus .fa {
        background:none !important;
    }

    Let me know if this works out.
    Kind Regards,
    Skandha

    #146759

    PositivelyVisual
    Participant

    Wonderful. Thanks for everything!

    #146770

    Skandha
    Participant

    @positivelyvisual: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/personal-trainer/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help,
    don’t hesitate to let me know. Have a good day!

    Kind Regards,
    Skandha

    #146836

    PositivelyVisual
    Participant

    @skandha: You sure did. I left a review. 5 stars.

    Thanks again and kind regards as well,
    Joshua Townsend
    http://www.positivevisdev.com

    #146845

    Skandha
    Participant

    @positivelyvisual:
    Dear Joshua,
    I have read your comments. They were really helpful. I greatly
    appreciate you took the time to write them. Thank you! 🙂

    Kind Regards,
    Skandha

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

The topic ‘Change Colors And Mobile Logo Size’ is closed to new replies.