[Resolved] I need your help on format and styling stuffs

[An Nguyen]

Hi awesome guys!

I need your help on some issues that I met:

1/ I want to add shadow at the bottom of main nav and sticky-nav.

2/ a/My logo on cavas-off (slideout-toggle) is too big how can I adjust its size

b/ and I also want to add 1 solid line green color with 50% width after logo.

c/I want to change the title of widget to white color. (Current is black)

d/ Change the height of box-search smaller with 5px.

I tried this css below but it doesn’t work.

.sidebar-nav-logo {
    padding: 0 20px 20px;
    text-align: center;
    margin: 0 0 15px 0;
    width: 30px;
    position: relative;
}
.sidebar-nav-logo:before {
    content: "";
    width: 30px;
    height: 1px;
    background: #6eb48c;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
}

3/ I tried to add view counts on posts and add it on header (heropage) and entry metadata of archived and blog pages.
I can handle it on header of hero-page by adding it in 1 line with metadata, but I can not put it on 1 line of metadata of archived and blog pages after using hook element and “entry after title”. Rule “display on blog, archived”.

Now view-count separates form metadata line in blog, archived page.

.entry-header div.post-views {
  display: inline-block;
  color: #62707c !important;  
  font-size: 100%;  
}

4/In mobile mode, I want my logo on top before main-nav and center how can I do it? (Keep current style in desktop mode)

[Tom]

Hi there,

1. You have this:

.main-navigation {
    border-bottom: solid 1px rgba(255,0,0,.1);
    border-top: 5px solid #177080;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}

Try replacing it with this:

.main-navigation,
.sticky-enabled .main-navigation.is_stuck {
    border-bottom: solid 1px rgba(255,0,0,.1);
    border-top: 5px solid #177080;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}

2 a. Try this:

.slideout-navigation .slideout-menu img {
    max-width: 200px;
}

b. Not too sure what you mean here – can you explain a bit more?

c. Try this:

.slideout-navigation .widget-title {
    color: white;
}

d. Try this:

.slideout-navigation .search-form input {
    padding: 5px;
}

3. To add it into the Hero area, you’d need to create a shortcode with the metadata being returned within it. Then you can add the shortcode to the hero itself.

4. Try this:

.site-logo.mobile-header-logo {
    width: 100%;
    margin: 0;
    text-align: center;
    display: block;
}

.site-logo.mobile-header-logo img {
    display: inline-block;
}

button.menu-toggle {
    margin-left: auto;
    margin-right: auto;
}

[An Nguyen]

Hi Tom,

Thanks for your help.

1/done
2/done
3/I can solve it by myself.
4/The code does not work like my expectation because of my unclear requirements. I’m sorry about that.

In mobile mode only, I want to display in menu following this order below:

–not homepage : logo on center then 2 others on the sides in same line (button-back-home on the left side and hamburger-menu on the right side <display slide-toggle on right side>).
–in homepage : logo on center then 2 others on the sides in same line (hamburger-menu on the left side <display slide-toggle on left side> and search icon on the right side).

Thanks Tom.

[Tom]

Maybe this will do it?:

.site-logo.mobile-header-logo {
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

.home .main-navigation.has-branding .menu-toggle {
    -webkit-box-ordinal-group: 2;
    order: 1;
}

.home .main-navigation .mobile-bar-items {
    -webkit-box-ordinal-group: 4;
    order: 3;
    margin-left: auto;
}

body:not(.home) #mobile-header .mobile-bar-items {
    display: none;
}

body:not(.home) a.logo-return {
    order: 1;
}

body:not(.home) button.menu-toggle {
    margin-left: auto;
}

[An Nguyen]

Hi Tom,

You are awesome! Your code is 100% fixed to the layout that I expect just in once time of coding. However, in homepage, it just needs a light format to get a perfect layout.

a/When I click on menu hamburger in homepage I want it displays from the left side which the same side with button menu only in homepage (because other pages already open from the right side and it is the same with button menu).

b/The search icon needs to shift to the right side a bit, its margin-right is around 20px (like margin-left of button menu).

Thanks Tom.

[Tom]

Try this PHP:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( is_front_page() ) {
        $settings['slideout_menu_side'] = 'left';
    }

    return $settings;
} );

Just tweaked my code here to fix the search item margin: https://generatepress.com/forums/topic/i-need-your-help-on-format-and-styling-stuffs/#post-1001910

[An Nguyen]

Hi Tom,

a/ I tried to add your code and run it and in homepage there is an error in mobile mode. A part of slider-out menu appears in homepage without activating it.

b/ I tried to tweak the code but the search icon does not move to the right with margin-left:20px.

.site-logo.mobile-header-logo {
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}
.home .main-navigation .search-item {
    margin-right: auto;
    margin-left: 20px;
}
.home .main-navigation.has-branding .menu-toggle {
    -webkit-box-ordinal-group: 2;
    order: 1;
}

.home .main-navigation .mobile-bar-items {
    -webkit-box-ordinal-group: 4;
    order: 3;
    margin-left: auto;
    margin-right: 20px;
}

body:not(.home) #mobile-header .mobile-bar-items {
    display: none;
}

body:not(.home) a.logo-return {
    order: 1;
    margin-right: auto;
    margin-left: 20px;
}

body:not(.home) button.menu-toggle {
    margin-left: auto;
}

Thanks Tom

[Tom]

Try adding this:

.offside--left {
    left: -300px;
}

.offside--left.is-open {
    -webkit-transform: translate3d(300px,0,0);
    -moz-transform: translate3d(300px,0,0);
    -ms-transform: translate3d(300px,0,0);
    -o-transform: translate3d(300px,0,0);
    transform: translate3d(300px,0,0);
}

Did you copy my updated CSS from above? You should need to specify 20px of margin anywhere.

[An Nguyen]

Hi Tom,

a/ The code just fixes error display. When I click on menu icon to activate, menu appears with error layout in mobile mode.

b/ I copied your code and added margin-left and right for each items. I also tried to add the code below to adjust the search icon on menu in homepage, but it doesn’t work.

.home .main-navigation .search-item {
    margin-right: auto;
    margin-left: 20px;
}

Thanks Tom.

[Tom]

a) I just edited the CSS above: https://generatepress.com/forums/topic/i-need-your-help-on-format-and-styling-stuffs/#post-1002750

b) Why are you adding the additional margin? Is it not working as I wrote it?

As for the other questions, can you create a new topic for each? It makes it easier for people to find the things they’re looking for in the future. Big threads like this are next to impossible to navigate after a while.

Thanks!

[An Nguyen]

a/It works like a charm.

b/yeah, It does not work as you wrote and that why I add some additional margins to adjust it a bit. Now, everything layout in menu is fine, but not good in homepage.

I tried to adjust search icon move a bit to the right side. It will be better, however my additional code is not working.

I will open new topic for new questions.

Thanks Tom.

[Tom]

Here’s what I see on the home page with the margin-right 20px removed: https://www.screencast.com/t/ipqQQ0K8L

Are you wanting more space to the right of the icon?

[An Nguyen]

Hi Tom,

We are not the same voice because there are something so weird.

a/ Inside Cavas-off menu, logo displays perfectly on MAC.

For window system, logo inside cavas-off menu disappears. You can see here.

b/I tested on both mac & windows (safari&chrome). Both have the same result with different with yours. The right margin of search icon is removed or not , the result is the same. You can view the screen capture here

[Tom]

a/ It’s actually not displaying on my Mac. The URL to the image is broken.

b/ Can you remove the margin you’ve added (use the code I provided above) so I can see the issue?

[An Nguyen]

Hi Tom,

a/ You’re right. In Safari on my MAC, I’m too, but in chrome it appears.

b/ I removed margin-left 20px.

Thanks Tom.

[Author]

Posts