Change position of Menu-Icon in Tonal theme.

  • Resolved zer0blok

    (@zer0blok)


    7 years, 10 months ago

    Hello All,

    I’m looking for help to change the position of the Menu-Icon (top-right of the screen) in the Tonal theme.

    * (1) I want the Icon to sit just above, or just under the Site-name, centered on the page (all within the header area).

    Also (-or, perhaps for another time…)

    (b) change the Size of the Icon (to about 50% of what it is).

    (c) change the Icon itself to another Icon (in this case a ‘Play’ icon).

    Site: https://www.puproket.com

    Btw, I have no coding experience at all ??

    Over the last couple of months i’ve got how to make a child-theme, and i’ve been able to sort out changing footer.php information, and removing the ‘Comment’-Icons (using copy-&-pasted CSS), but, i don’t know what i’m doing.

    I chose Tonal as a base to work from as it’s almost perfect for what i was looking for. It’s only this final issue to be resolved. I’ve been unable to follow the how-to videos and info i’ve found so far. I have the header.php in my child-theme from Tonal, ready to be edited.

    Thanks in advance.
    ??

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi there!

    This was an interesting one ??

    I was able to find the code for a play button on https://github.com/Automattic/Genericons (the menu icon comes from an icon font called Genericons).

    The following CSS should shrink the icon, swap it out, and center it:

    div#menu-nav {
    width: 20px;
    height: 20px;
    font-size: 12px;
    padding: 4px;
}

#menu-nav:before {
    content: '\f452';
}

    Add that in to the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.

    Let me know how it looks!

    Thread Starter zer0blok

    (@zer0blok)

    Super, thanks Chad.

    The Icon has done 2 of the 3 things -it hasn’t been centered though.

    Got a spell which centers it just above the Site-Title (‘Pup Roket’)…?

    Thanks too for the Geniricons resource; will look into it.

    (P.S. My CSS panel currently looks like this:)

    .icon-block {
    display: none;
    }

    div#menu-nav {
    width: 20px;
    height: 20px;
    font-size: 12px;
    padding: 4px;
    }

    #menu-nav:before {
    content: ‘\f452’;
    }

    Looks like my copy and paste missed a bit! Odd!

    div#menu-nav {
    width: 20px;
    height: 20px;
    font-size: 12px;
    padding: 4px;
    position: static;
    margin: 0 auto;
    float: none;
}

#menu-nav:before {
    content: '\f452';
}

    There are three more attributes in the div#menu-nav style that should handle the centering for you ??

    Thread Starter zer0blok

    (@zer0blok)

    That has achieved the goal, 100%. Cheers ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change position of Menu-Icon in Tonal theme.’ is closed to new replies.