Return to previous page

Header height + top menu on the right - by paulzep

This topic has 33 replies, 3 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

paulzep

Participant

October 4, 2018 at 20:09

Hi,

I have 2 question about the header:

1/ On desktop, the header with logo and top menu is a bit to height : https://www.bz5-beta.ovh/ compared to https://www.8theme.com/demo/royal/
I did not move anything.

2/ On desktop, the top menu is too much centered. I would like it to be more on the right side (symmetrically to the logo that is on the left side).

If anybody can help me…

Paul

#200526 Copied

32 Answers
Rose Tyler

Support staff

October 5, 2018 at 10:17
Hello,

1. Please add this code in Theme Options > Custom css or in style.css file of your child theme:
```
.page-content {
    margin-top: 0px;
}
.header-wrapper .navbar .tbs {
    padding-top: 0px;
}
```
2.
```
.header-wrapper .navbar-collapse, .fixed-header-area .navbar-collapse{
    float: right;
}
```
Regards
#200562 Copied
paulzep

Participant

October 5, 2018 at 13:35

Thank you. I tried both but neither of them works.

Header weight is okay when I put a margin-top: -25px to the first row of the page. But it’s correct on desktop only. It’s hidden on mobile. So it’s not the solution.

Paul

#200580 Copied

Rose Tyler

Support staff

October 5, 2018 at 13:55

Please provide temporary wp-admin access.

Regards

#200585 Copied

paulzep

Participant

October 5, 2018 at 14:44

Your access in private content.

Header Height and right work now on all the pages, but not on:
https://www.bz5-beta.ovh/
https://www.bz5-beta.ovh/presse/
https://www.bz5-beta.ovh/contact/

By the way, the content portfolio does not display anymore on the pages:
https://www.bz5-beta.ovh/presse/

An other point: mobile menu. I’ve created a specific menu for mobile but it’s not displayed.

Please, contact administrator
for this information.

#200587 Copied
Rose Tyler

Support staff

October 5, 2018 at 15:10
Hello,

1. As I see the custom css code works fine on all pages. If you want to change this height of the header http://prntscr.com/l2kh5j use next custom css also:
```
.header .navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}
```
2. Is the problem solved http://prntscr.com/l2kjga ?
Please read our documentation https://www.8theme.com/demo/docs/royal/#6_portfolio
3. I do not see the problem http://prntscr.com/l2kjyh > http://prntscr.com/l2kk38

Regards
#200590 Copied
paulzep

Participant

October 5, 2018 at 15:31

Thanks a lot!

Point 3: I do not see the same menu :
https://www.cjoint.com/c/HJfoCY3qtnE

Two last question:

on the footer:
do you know how to remove the Newsletter tag?
and how to center the social icon?

Paul

#200593 Copied
Rose Tyler

Support staff

October 5, 2018 at 15:57
3. To disable this http://prntscr.com/l2l74u you can use:
```
.mobile-nav-heading, .mobile-nav .links {
    display:  none;
}
.mobile-nav-heading.close-mobile-nav {
    display: block;
}
```
4. http://prntscr.com/l2l8jk
```
.footer-sidebar-widget .et-follow-buttons {
    text-align: center;
    margin-top: 15px;
}
```
Regards
#200598 Copied
paulzep

Participant

October 8, 2018 at 13:15

Thank you for your answers.

The footer is okay.

For the menu on mobile phone, I’ve put the code you wrote but it does not work: the links to Account and Sign in are still there.

I have 2 more question:

1/ The top menu in the article and Portfolio pages is not height enough.
For example: https://www.bz5-beta.ovh/presse/nantes-policier-tire-sur-un-jeune-place-en-garde-a-vue/
Compared to https://www.bz5-beta.ovh/presse/ (where it is okay).

2/ I would like to translate some text in French:
– https://www.bz5-beta.ovh/presse/maitre-ruben-invite-chroniqueur-dans-c-est-que-de-la-tele/ : ‘Recent Works’, ‘View large’ and ‘More details’ on the images
– https://www.bz5-beta.ovh/2017/10/ : ‘Monthly archives’
– https://www.bz5-beta.ovh/quels-sont-les-recours-lors-du-jugement-rendu-par-defaut/ : ‘Share post’

Paul

#200698 Copied
Rose Tyler

Support staff

October 8, 2018 at 13:43
3. Please check the code one more time http://prntscr.com/l3k88n http://prntscr.com/l3k8hv
1. Please add
```
.page-content {
    margin-top: 0px;
} 
```
in custom css http://prntscr.com/l3k5ac for this page https://www.bz5-beta.ovh/presse/
and edit this code http://prntscr.com/l3k5kk
2. https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/ (this article for xstore theme, but for royal it works in same way)

Regards
#200701 Copied
paulzep

Participant

October 8, 2018 at 14:12

Thank you.

The mobile menu is okay.

For the top header height:
the result I want to get on all the pages is: https://www.bz5-beta.ovh/presse/
I have this result without writing .page-content {margin-top: 0px;}

And on the article/portfolio pages I have :
https://www.bz5-beta.ovh/presse/bavure-de-villemomble-on-se-demande-qui-sont-les-accuses-et-les-victimes/ where the header height is too small. And I want the header to be larger.

Do you kwow why it is different from an page to another?

#200704 Copied
Rose Tyler

Support staff

October 8, 2018 at 14:27
You’re welcome!
Please see screenshots http://prntscr.com/l3kqi2 http://prntscr.com/l3kqpi To make the header on all pages (with breadcrumbs and without it) same, please follow instruction from the previous reply
+ this code:
```
.header .tbs {
    padding-top: 0px;
}
```
Regards
#200705 Copied
paulzep

Participant

October 18, 2018 at 14:57

Hello,

1/ I can not solve this problem:
the header menu is at the right height on most of the pages ( .header .navbar {padding-top: 15px;
padding-bottom: 9px;} ), but not on articles/portfolio dynamic pages, where the menu is not height enough :
Example: https://www.bz5-beta.ovh/presse/nantes-policier-tire-sur-un-jeune-place-en-garde-a-vue/
View: https://www.cjoint.com/c/HJsn1gBYaEE

2/ I would like to change the look of the grid items on the page https://www.bz5-beta.ovh/presse/: text-decoration: none instead of Uppercase, button color #C60800 instead of grey, bg color white instead of grey…
> https://www.cjoint.com/c/HJsnU3Sm0cE

Thank you for answering.

Paul

#201291 Copied
Rose Tyler

Support staff

October 18, 2018 at 16:08
Hello,

1. Please change this custom css code http://prntscr.com/l7l1t1 to
```
.header .navbar {
    padding-top: 15px;
    padding-bottom: 39px;
}
.breadcrumbs-type-9 .page-content {
    margin-top: 0px;
}
```
2. Try to create the desired result using Grid Bilder then select the design in settings of the element http://prntscr.com/l7l4c2
https://wpbakery.com/video-academy/grid-builder/

Regards
#201312 Copied
paulzep

Participant

October 19, 2018 at 15:44

Hello,

Many thanks! Point 1 and 2 are okay.

I have 2 other questions about the header/menu:

1/ I would like to change color of the menu on the active navigation page.

2/ I would like to put bg color: #c60800 on the tab menu Contact, like here: https://www.ruben-associes.com/index.html
I’ve tried: #menu-item-15532 {background-color: #c60800;} but it works only with the text area and not with the tab area.

Can you please help me.

#201364 Copied
Rose Tyler

Support staff

October 22, 2018 at 09:07
Hello,

Sorry for the delay due to the weekends.
1)
```
.header-wrapper .menu .current-menu-item a {
    color: red !important;
}
```
2) Please provide some screenshots for better understanding the desired result.

Regards
#201406 Copied
paulzep

Participant

October 22, 2018 at 09:59

Hello,

Thank you. Point 1 is okay.

2/ I would like to put bg color: #c60800 on the header menu, over the Contact area.
Screenshot: https://www.cjoint.com/doc/18_10/HJwi2tHX6yE_capt-contact-button.jpg

I’ve tried: #menu-item-15532 {background-color: #c60800;} but it works only on the text/link area.

#201416 Copied
Rose Tyler

Support staff

October 22, 2018 at 15:13
Hello,

Please try this code:
```
@media only screen and (min-width: 993px) {
    .tbs {
        padding-top: 0;
    }
    .header .navbar {
        padding: 0;
    }
    .menu > li > a {
        padding-top: 40px;
        padding-bottom: 40px;
        padding: 40px 20px;
    }
    .menu > li:last-child > a {
        background: #b11111;
        color: #fff !important;
    }
    .menu > li.current-menu-item > a:after {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #b11111;
        content: '';
        left: 0;
        right: 0;
    }

    .menu > li.current-menu-item > a {
        position: relative;
    }

    .menu > li:last-child > a:before {
        content: '\f095';
        font-family: 'fontawesome';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -150%);
    }
    .fixed-header-area .header-logo {
        padding: 0;
    }
    .fixed-header-area .menu-main-container > ul {
        padding-top: 0;
    }
    .fixed-header-area .collapse br {
        display: none;
    }
    .fixed-header-area .menu-main-container > ul li {
        vertical-align: bottom;
    }
    .fixed-header-area {
        box-shadow: none;
        border: none;
    }
}
```
Regards
#201451 Copied
paulzep

Participant

October 23, 2018 at 15:08

Thank you. It’s great and looks fine!

I have a question about an image on mobile:

I’m using this image on desktop and tablet: https://www.cjoint.com/doc/18_10/HJxofLIyrJE_slide1-home-portrait-3.jpg
I would like to replace with this image on mobile: https://www.cjoint.com/doc/18_10/HJxohelkzEE_equipe-cabinet-ruben-et-associes.jpg

Is it possible?

#201546 Copied
Rose Tyler

Support staff

October 23, 2018 at 15:23
You’re welcome!
You can add a custom class for row and use custom css code for page http://prntscr.com/l9hces
for example http://prntscr.com/l9hdao > http://prntscr.com/l9hdn7
```
.my-custom-class .upb_row_bg {
    background-image: url(https://www.cjoint.com/doc/18_10/HJxohelkzEE_equipe-cabinet-ruben-et-associes.jpg) !important;
}
```
Regards
#201548 Copied
paulzep

Participant

October 23, 2018 at 16:31

Thank you.

My additionnal class is: .img-resp

I put this code in the page CSS:
@media only screen and (max-device-width: 480px) {
.img-resp .upb_row_bg {
background-image: url(https://www.bz5-beta.ovh/wp-content/uploads/2018/10/equipe-cabinet-ruben-et-associes.jpg);
}
}
And it does not work.

#201557 Copied
Rose Tyler

Support staff

October 24, 2018 at 07:23
You need to add !important;
```
@media only screen and (max-device-width: 480px) {
    .img-resp .upb_row_bg {
    background-image: url(https://www.bz5-beta.ovh/wp-content/uploads/2018/10/equipe-cabinet-ruben-et-associes.jpg) !important;
    }
}
```
Regards
#201574 Copied
paulzep

Participant

October 24, 2018 at 10:16

Hello,

Thank you. It works on mobile.

I have a last question:

On the homepage I’ve put a shadow background on the bottom of the first image (image with the lion).
See the Screenshot: https://www.cjoint.com/doc/18_10/HJyjhRn7iWE_capt-homepage-1.jpg

But I would like to display this shadow over the fullwidth. Is it possible?
Like this: https://www.cjoint.com/doc/18_10/HJyjp25UtxE_capt-homepage-2.jpg

#201592 Copied

Rose Tyler

Support staff

October 24, 2018 at 15:28

Hello,

You’re welcome!
Sorry, but your question is a bit unclear to me. Please describe the desired result in more details.

Regards

#201630 Copied

paulzep

Participant

October 24, 2018 at 16:01

Actually the shadow gackground on the bottom of the image with the lion is NOT fullwidth :
https://www.cjoint.com/doc/18_10/HJyoZJ75TUE_capt-homepage-3.jpg

And I would like to display this shadow background on 100% width, like this: https://www.cjoint.com/doc/18_10/HJyjp25UtxE_capt-homepage-2.jpg

2/ I have a question about the portfolio:
I would like to delete: <p>was last modified: octobre 23rd, 2018 by admin6515</p>
located in the slider-container carousel-area
> https://www.cjoint.com/doc/18_10/HJyo5DHZWaE_capt-homepage-4.jpg

#201636 Copied

paulzep

Participant

October 25, 2018 at 14:15

Sorry, did you have a look at my last message?

#201695 Copied
Rose Tyler

Support staff

October 25, 2018 at 14:43
1) You need to change the structure of the page to be able to set Row stretch > Stretch row and content https://gyazo.com/e868373dfc1f0d9e4b594ca1cd584d33
2)
```
.recentCarousel .slide-item .caption p {
    display: none;
}
```
Regards
#201698 Copied
paulzep

Participant

January 4, 2019 at 15:51

Hello,

My website is almost ready. I have 2 last point:

1/ On this page with portfolio grid : https://www.bz5-beta.ovh/presse/#videos
I would like to put a little image on the left of the title (a different image each time). Is is possible?

2/ On the same page : https://www.bz5-beta.ovh/presse/#temoignages
Is it possible to display the testimonies on 3 columns? with an arrow on the right to display the 4th, the 5th…

Thank you for answering.

#206660 Copied

Olga Barlow

Support staff

January 5, 2019 at 12:56

Hello,

1) Are you talking about project title http://prntscr.com/m3c6i4 ? There is no such option, unfortunately.

2) It’s possible by additional customization only. You may contact Codeable team to get help with additional customization.

Regards

#206683 Copied

paulzep

Participant

February 27, 2019 at 18:16

Hello,
I have a problem with the top image of my homepage (just under the top menu):
on a large screen (1600 to 1920 px), the top image (with the lion) is falling down over the advanced carousel.
So there’s a problem with blocks overlapping

Could you please have a look at the duplicate page:
https://www.ruben-associes.com/home-copy/

Awaiting for your urgent help.
Paul

Thank you for answering.

#210007 Copied
1 2

Viewing 30 results - 1 through 30 (of 33 total)