Mobile/Other

  • Author
    Posts
  • #155279
    haloarthub
    Member

    The Mobile Menu when opened the X Button has a white scribble box around it Is there a way to get rid of it. Also the menu/ 3 lines stays highlighted when I exit .

    I have a few more things to ask you if you dont mind.

    Any way to change the black footer shape/design at the bottom if not thats ok just curious.

    Is there a way to have footer widgets at full width i would like to display an image but bigger ?

    And Is there a way to put the tag line next to the logo i have a lot of negative space between the logo and the menu tabs if possible only do it for desktop. And it doesnt have to be a tag line just something to ease the negative space

    Lastly the line above more post i would like to change it to black.

    Im Sorry this is long and a lot of stuff. i Hope you dont mind Thanks

    The blog I need help with is: (visible only to logged in users)

    #155304
    binarymoon
    Theme Author

    Hi there – these features are accessibility features. They are designed to show people who have vision impairments what button they are currently on.

    If you really want to get rid of them then we can tweak the styles.

    button.close-overlay {
        outline: none;
    }
    
    .masthead .branding button.open-overlay:focus,
    .menu-overlay .close-overlay,
    .menu-overlay .close-overlay:focus {
        background: #000;
        color: #fff;
        outline: none;
    }

    Any way to change the black footer shape/design at the bottom if not thats ok just curious.

    Do you mean the upward pointing arrow? That’s a back to top button. It’s an svg icon so no way to change it. We can hide it if you don’t want it there:

    #footer .scroll-to-top {
        display: none;
    }

    Is there a way to have footer widgets at full width i would like to display an image but bigger ?

    Do you mean you want the individual widgets to be full width, or the maximum width of the 3 columns to be full width (so that there’s no margins)?

    Tagline

    You might want to tweak the styles (and the text) but this should get you started:

    .masthead .custom-logo-link:after { 
        display: inline;
        color:#fff;
        content: "hello"; 
        margin-left:10px;
        opacity:0.5;
    }
    
    .masthead .custom-logo-link {
        display:flex;
        align-items:center;
    }

    More posts border color:

    .infinite-scroll #infinite-handle button {
    border-color: #000;
    }

    Thanks – Ben

    #155311
    haloarthub
    Member
    Original poster

    These Work Perfect Thank You So Much.

    And to answer your question : Do you mean you want the individual widgets to be full width, or the maximum width of the 3 columns to be full width (so that there’s no margins)?

    Could I have both CSS Codes To see Which one works better for me.

    #155312
    haloarthub
    Member
    Original poster

    Also I wasn’t Meaning the black arrow at the bottom but that code help a lot. I was meaning the Rectangle box that the footer widgets go in. Can you change the shape of that or no? For Example making it slanted or more abstract or different shape in general

    #155365
    binarymoon
    Theme Author

    Could I have both CSS Codes To see Which one works better for me.

    Full width footer widget block:

    .footer-widgets .container {
        max-width: unset;
    }

    Full width widgets:

    #footer .sidebar-footer .widget {
        width: 100%;
    }

    Also I wasn’t Meaning the black arrow at the bottom but that code help a lot. I was meaning the Rectangle box that the footer widgets go in. Can you change the shape of that or no? For Example making it slanted or more abstract or different shape in general

    Ah – ok. That’s different indeed. Something like this might help:

    .footer-widgets {
        position:relative;
    }
    
    .footer-widgets:after {
        display:block;
        content:'';
        transform: skewY(3deg);
        background: inherit;
        position: absolute;
        transform-origin: 50%;
        top: -2rem;
        right:0;
        bottom: -2rem;
        left:0;
        z-index:-1;
    }

    Thanks – Ben

  • The topic ‘Mobile/Other’ is closed to new replies.