Customise Menu Appearance

Resolved zer0blok
(@zer0blok)

6 years, 11 months ago

Hi, stage-two of requests to customise the appearance of Scrawl on http://puproket.com 🙂

The Menu-Icon has been centered and made visible on scroll-down (thanks to David C. for that), all working right. These requests relate to the Menu itself:

* (1) The Menu opens-up and occupies the right of the screen (pushing the contents of the current-page to the left). I want the Menu to open from where the Icon now is, occupying the center (pushing the contents of the current-page to the bottom). The Close-button would appear in place of the Icon.

(2) Changes to be made to the appearance of the Menu:

*Background-colour: white.
*Text: black.
*Content-headings: centered.
*Seperator-lines (for Content-headings) removed.
(Additionally, if it’s not too much in one new Topic, Text font, size and colour also changeable.)

[-notes-]

(1) An example of how i see the Menu opening is at: http://www.anonymouscontent.com/#404
(click on the menu-icon)

(2) A Menu-page which is pretty much how i’d like the Menu to appear when active (minus the Close-button):
http://puproket.com/pup-roket

With thanks.

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

David C.
(@dcoleonline)

6 years, 11 months ago
Hi again,

Item 1 requires some heavy CSS (and possibly Javascript) customization beyond the scope of what I’d be able to assist with, but you might look into https://jobs.wordpress.net or https://jetpack.pro to hire a developer to make these changes for you.

Here is some CSS you can use for the other items:
```
/* remove separators and center text */

.main-navigation li {
    border-top: none;
    text-align: center;
}

/* set menu font family, size and weight */

.main-navigation {
    font-family: Lora, Georgia, serif;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;
}

/* set menu font color */

.main-navigation a,
.main-navigation a:visited {
    color: #000;
}
.main-navigation li a:hover,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a {
    color: #000;
}

/* set menu background color */

.slide-menu {
    background-color: #fff;
}
```
I’ve left the font family/size/weight section as the defaults, so feel free to change those as needed.
Thread Starter zer0blok
(@zer0blok)

6 years, 11 months ago

Hi David, thanks for helping again.

(1) So, changing the Menu slide-out from top-right to the top-center cannot be done in the same (relatively) simple way as centering the Menu-icon… .

(2) The css for changing the Menu appearance is all good.

On a tablet, in portrait-orientation, where the Menu slides-open from the top-center rather than the top-right anyway, it all looks nice and clean… a shame it’s not a simple thing to change, as i’d hoped.

Unfortunately, a deal-breaker, as the Menu is the only thing about this theme which needs to change.

Would you advise me on the following:

I have a B-plan, which is to do away with the Menu (and Menu-icon), and instead, use the Site-Title button to navigate back to the Home-page, which will be the Menu-page (http://puproket.com/pup-roket).

For this to work, (i) the Site-title would have to be centered, and made visible on scroll-down, and (ii) the Menu-icon removed.

* Is this feasible?

With thanks
David C.
(@dcoleonline)

6 years, 11 months ago
Hi there,

I’m glad the menu CSS worked. Although I did look into moving the menu, it’s pretty complex, which is why I made the recommendation about seeking a developer.

I recently found an article that recommends a plugin you could try, so there’s another option you might look into. If you run into issues with the plugin, the plugin’s support forum would be the best place to ask for help with it.

The only other thing I’d suggest is looking for a theme that already has a top/down navigation view by default. It should be a lot easier to make the colors of a theme work when it has the functionality you desire already built in.

Would you advise me on the following…(i) the Site-title would have to be centered, and made visible on scroll-down, and (ii) the Menu-icon removed.

If you wanted to do those things, you could replace all of the .menu-toggle CSS references from the other thread with this:
```
/* Hide menu toggle */
.menu-toggle {
    display: none;
}
```
Then this would center the site title, and it would remain visible when scrolling:
```
/* Center site title text */
.site-branding {
    width: 100%;
    text-align: center;
}
```
- This reply was modified 6 years, 11 months ago by David C..
Thread Starter zer0blok
(@zer0blok)

6 years, 11 months ago

I tried the plug-in. In-short, it didn’t work, so i dropped it.

I’ve tried the code you gave to hide the Menu and change the Site-Title: all good.

I’ve been trying to get a spacious, clean theme for a while. I was playing with ‘Tonal’ for about a month, but in the end it didn’t quite work for what i need. ‘Scrawl’ has come the closest… so, seeing as all else is pretty much good with the theme, i’m gonna drop the Menu-icon and use the site-Title to navigate. When the Site is up-and-running i can look into changing the Menu position; this is a good solution for now. -For future builds i’ll make sure the Menu-position on a theme is totally cool before i start working with it.

Once again, thanks for your help. (I’ve another round of requests -so maybe i’ll hear from you again, lol.) Topic resolved.
🙂

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

The topic ‘Customise Menu Appearance’ is closed to new replies.

Tags