FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.
FM Design

Design and development for Forumotion forums.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
See more
Top posting users this month

Top Achievers
Ange Tuteur
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
SLGray
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Valoish
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Luffy
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Wilson
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Van-Helsing
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Niko!
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Ace 1
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
JerriLeah7
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Rhino.Freak
[SOLVED] modification in navbar code Poll_c10[SOLVED] modification in navbar code Poll_m10[SOLVED] modification in navbar code Poll_c10 
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24
Keywords

search  French  line-break  message  wio_group_legend  Version  Dutch  phpBB3  fa_night_container  beta-testers  tool  German  FireFox  text_editor_textarea  Mozilla  options  translations  editor  left  plugin  chatBox  fa_theme_selector  js  46-0-1  Update  fa_personal_emoticons_list  


[SOLVED] modification in navbar code

 :: Coding, Resources, and Plugins :: Coding & General Questions :: Questions Archive

View previous topic View next topic Go down

[SOLVED] modification in navbar code Empty [SOLVED] modification in navbar code

#16199
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Thu 04 Aug 2016, 09:30

i want that element be in right and not left
because i have an arabic forum
cane you modify this code


Code:
    <style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: right;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: right;
  }
}
</style>
<ul id="myTopnav" class="topnav">
    
   <li>
      <a href="#home" class="active">تصفح اخر اعلانات</a>
   </li>
    
   <li>
      <a href="#news">
الوظائف الحكومية والشركات الكبرى</a>
   </li>
    
   <li>
      <a href="#contact">الوظائف الشاغرة وفرص العمل
</a>
   </li>
    
   <li>
      <a href="#about">طلبات العمل والتوظيف
</a>
   </li>
    
   <li class="icon">
          <a onclick="myFunction()" style="font-size:15px;" href="javascript:void(0);">☰</a> 
   </li>
</ul>
<div style="padding-left:16px">
    
   <h2>
      Responsive Topnav Example
   </h2>
    
   <p>
      Resize the browser window to see how it works.
   </p>
</div>
 <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script> 



i want be like this
[SOLVED] modification in navbar code Captur28 [SOLVED] modification in navbar code Ht10

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16259
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 04 Aug 2016, 17:49

Hi @sohab,

Let me know if this works for you :
Code:
    <style>
body {margin:0;}
ul.topnav {
  direction:rtl;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
ul.topnav li {float: right;}
 
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
 
ul.topnav li a:hover {background-color: #555;}
 
ul.topnav li.icon {display: none;}
 
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float:left;
    display: inline-block;
  }
}
 
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align:right;
  }
}
</style>
<ul id="myTopnav" class="topnav">
   
  <li>
      <a href="#home" class="active">تصفح اخر اعلانات</a>
  </li>
   
  <li>
      <a href="#news">
الوظائف الحكومية والشركات الكبرى</a>
  </li>
   
  <li>
      <a href="#contact">الوظائف الشاغرة وفرص العمل
</a>
  </li>
   
  <li>
      <a href="#about">طلبات العمل والتوظيف
</a>
  </li>
   
  <li class="icon">
          <a onclick="myFunction()" style="font-size:15px;" href="javascript:void(0);">☰</a>
  </li>
</ul>
<div style="padding-left:16px">
   
  <h2>
      Responsive Topnav Example
  </h2>
   
  <p>
      Resize the browser window to see how it works.
  </p>
</div>
 <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16270
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Thu 04 Aug 2016, 19:30

nooo

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16275
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 04 Aug 2016, 21:12

How about this ?
Code:
    <style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
ul.topnav li {float: right;}
 
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
 
ul.topnav li a:hover {background-color: #555;}
 
ul.topnav li.icon {display: none;}
 
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
 
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: right;
  }
}
</style>
<ul id="myTopnav" class="topnav">
   
  <li>
      <a href="#home" class="active">تصفح اخر اعلانات</a>
  </li>
   
  <li>
      <a href="#news">
الوظائف الحكومية والشركات الكبرى</a>
  </li>
   
  <li>
      <a href="#contact">الوظائف الشاغرة وفرص العمل
</a>
  </li>
   
  <li>
      <a href="#about">طلبات العمل والتوظيف
</a>
  </li>
   
  <li class="icon">
          <a onclick="myFunction()" style="font-size:15px;" href="javascript:void(0);">☰</a>
  </li>
</ul>
<div style="padding-right:16px">
   
  <h2>
      Responsive Topnav Example
  </h2>
   
  <p>
      Resize the browser window to see how it works.
  </p>
</div>
 <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16319
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Fri 05 Aug 2016, 01:53

nothink is changing ?
i want the content be in right because he is an arabic

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16408
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 05 Aug 2016, 14:49

The first code I gave you was to the right on my forum. Think Do you have this installed somewhere on your forum so that I can inspect it ?

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16454
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Fri 05 Aug 2016, 15:24

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16470
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 05 Aug 2016, 16:02

See if adding this CSS to your stylesheet ( or the stylesheet in the HTML ) helps :
Code:
ul.topnav li {
  float:right !important;
}

@media screen and (max-width: 680px){
  ul.topnav.responsive li a {
    text-align:right !important;
  }
}

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16489
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Fri 05 Aug 2016, 18:40

it's okey but need just a simple modification
i want that bouton of more be on left

[SOLVED] modification in navbar code Captur30

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16494
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 05 Aug 2016, 19:19

This CSS rule should set it to the left :
Code:
ul.topnav li.icon {
  float:left !important;
}

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16502
sohab
sohab

Gender : Unspecified
Posts : 140
Points : 3262
Reputation : 2
Language : frensh
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://www.saudijobstoday.net/

Postsohab Fri 05 Aug 2016, 19:37

yessssss thanksssssssss

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#16511
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12253
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 05 Aug 2016, 20:10

You're welcome ! ^^

Topic archived

[SOLVED] modification in navbar code Empty Re: [SOLVED] modification in navbar code

#0
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Similar topics
» simple modification in this code
» [SOLVED] Hide specific Navbar Links
» [SOLVED] Code Snippet
» [SOLVED] about code snippet
» [SOLVED] i would edit this code

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

FM Design :: Coding, Resources, and Plugins :: Coding & General Questions :: Questions Archive

 
Permissions in this forum:
You cannot reply to topics in this forum
Free forum | Computers and Internet | Internet | ©phpBB | Free forum support | Report an abuse | Cookies | Forumotion.com
Terms of service | Founder tools | Tutorials | Affiliates